Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 16, 2015 at 10:45 am #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!

    October 16, 2015 at 10:20 pm #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;
}
    November 8, 2015 at 7:49 am #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!!!

    November 8, 2015 at 12:20 pm #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.

    April 22, 2017 at 3:24 pm #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

    April 23, 2017 at 5:24 am #114548
    Sakin
    Keymaster

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

    April 23, 2017 at 7:24 am #114549
    bigstes
    Participant

    my site URL is

    http://www.zweidoteins.de/

    the uppercase i get now

    April 23, 2017 at 11:46 am #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.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Design of sidebar widget titles’ is closed to new replies.