WP free theme modify (CSS)

[Marin]

Hi,

I’ve started to build my new website.
I bought a hosting and a domain, and I installed WP (using free theme).
Now I want to modify that free theme.

I have some basic knowledge on CSS and HTML, so I did about 70% of modification.
But, now I’m stuck with some silly problems.

I can’t change navigation menu (font, size, color) and I can’t modify boxes on the right sidebar (borders, background, etc.).

This is a screenshot of my webpage:
https://drive.google.com/open?id=0B8mgV8g928bRX1YtNmR0ZUpNWG8

And my CSS file:
https://drive.google.com/open?id=0B8mgV8g928bRU0RiMUxnM3h4UFE

Any advice?

Thanks in advance,
Marin

[PaulOB]

Hi,

We’d need to see the html for the site to know which css rules apply to those elements.

It would be much better if we had a link to the page in question because without a working example it will be hard to give accurate advice.

If you have managed to make 70% of the changes you wanted then it seems that you probably have run into specificity issues so use the developer tools in your browser and highlight the areas that you are interested ina and then look at the css rules that apply in the developer panel.

To change those css rules you need to make sure that your new rules follow after the original rules and that they have the same or higher specificity.

That means if the original rule was defined so:

.widget .messywidget .item .nav {background:red}

Then you would need to do the same to over-ride it.

.widget .messywidget .item .nav {background:blue}

Just saying ‘.nav{background:blue}’ would be no use.

[Marin]

Hi,
thanks for your reply.

This is the link to my site:
http://supertata.net/

[PaulOB]

Hi,

The color and font-size on the navbarcan be adjusted by using this rule.

.navbar-default .navbar-nav>li>a {
color: red;
font-size:20px;
}

Note that the above rule comes from the bootstrap css and will have a global effect so you might want to use one of your own classes to modify it which means doing this:

.blogx-navbar.navbar-default .navbar-nav>li>a {
color: red;
font-size:20px;
}

I’m assuming the class .blogx-navbar was one of your own?

Generally you want to avoid changing the bootstrap rules directly but over-ride them where necessary and if unique to a page or set of elements then use your own class as the modifier.

The boxes on the right are called .widget so you can over-ride them like this:

.widget{border:1px solid red;box-shadow:0 0 2px red;background:green}

However you must ensure that the css you add is after the original styles in the cascade. usually your custom.css file would be the last file in the sequence and that’s where you should add your css.

I am not a wordpress user so don’t know exactly how the Css files in wordpress are set up but my logic is solid:)

[Marin]

Wow, thanks a lot!
Work like a charm

However, I do have one question.
As you can see on my right sidebar - there are few boxes (widgets).
I tried to over-ride them like you told me, but then I got one style for all widgets.

Is there any way to apply different style to each widget?

Thanks!

[jgetner]

add a different class or id to each widget. That are unique to those widgets and then style each individually.

[PaulOB]

@Marin

Is there any way to apply different style to each widget?

As jgetner said above the best way is to add a custom class to each widget and then use that class to style as required.

You can do it without adding classes but then it becomes mark up dependent which is un-reliable if content changes.

e.g.

.widget:nth-of-type(1){background:green}
.widget:nth-of-type(2){background:red}
.widget:nth-of-type(3){background:blue}

[Marin]

Thanks a lot!