This topic contains 7 replies, has 3 voices, and was last updated by  Sakin 7 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #77872

    Michaela
    Participant

    Hi Sakin,
    I’d like to customize the style of my widget titles a little more. For example, I love the style of the titles in the sidebar of these websites:
    https://www.22places.de/fotolocations-hongkong/ (turquoise background, turquouise line all the way to the right)
    http://www.worldofwanderlust.com/(centered title, colored line to the left and right of it)
    I could change themes and get their themes instead, but I really love yours and don’t want to change. Therefore, it would be great if you could let me know how to get these styles (maybe with CSS).
    Thanks a lot!

    #77941

    Sakin
    Keymaster

    @Michaela: You can try adding following css in “Appearance => Theme Options => Custom CSS” box:

    #secondary .widget {
        border: none;
        box-shadow: none;
        padding: 0;
    }
    #secondary .widget-title {
        background-color: #3cc;
        padding: 5px 10px;
    }
    #79322

    Michaela
    Participant

    Hi Sakin,
    thanks a lot. Your suggestion works fine to imitate something close to the first website I mentioned. However, what would be the exact code to only show the background color behind the text (not the whole line) and have the line keep on going all the way to the right, even where there is no text anymore?
    Also, how do I imitate the second website I mentioned? I tried this:

    /* Sidebar title style*/
    #secondary .widget-title {
        content: ' ';
        display:inline-block;
        position: relative;
    }
    #secondary .widget-title:before, #secondary .widget-title:after {
    background: #000;
      content: "";
      display: block;
      height: 1px;
      position: absolute;
      top: 50%;
      width: 50%;
    }
    #secondary .widget-title:before {
      right: 100%;
    }
    
    #secondary .widget-title:after {
      left: 100%;
    }

    However, this only looks good for relatively short titles like “Recent Posts”, but not for longer ones like ” French Polynesia guidebook” or “French Polynesia Map” as you can see on this sample page:
    http://travelintense.com/eco-travel-destinations/french-polynesia/

    What can I do to change this and have it look good no matter the title length?

    Oh, and one last question: How do I get a little space between the title and the line on the left and right?

    Thanks a lot for your help!!!

    #79325

    Sakin
    Keymaster

    @Michaela: It will be as below.
    #secondary .widget-title { background-color: #000 }

    For detail customization of site, we recommend you to hire customizer.

    #114527

    bigstes
    Participant

    Hi,

    i see that you know a lot about customization. i wish to customize the sidebar of my blog and wish that it look like these one:
    https://www.lost-place.org/lost-places-niedersachsen/

    i love the uppercase and the grey dashed line. how can i put it in my blog?

    regards

    #114548

    Sakin
    Keymaster

    @bigstes: can you post in your site URL so that I can check in.

    #114549

    bigstes
    Participant

    my site URL is

    http://www.zweidoteins.de/

    the uppercase i get now

    #114563

    Sakin
    Keymaster

    @bigstes: Sorry, but you are not using our theme and we only support theme developed my us. So, you should consider posting this question in the theme authors support forum.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.