[Michaela]

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!

[Sakin]

@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;
}

[Michaela]

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!!!

[Sakin]

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

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

[bigstes]

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

[Sakin]

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

[bigstes]

my site URL is

http://www.zweidoteins.de/

the uppercase i get now

[Sakin]

@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