New to the community? Start here

custom css

I edited the child-stlye.css in the child theme libcss folder of the WPMU Nelo but it is not overriding the parent theme.

Thannks

Fri, 20 Apr 2012 4:48:27

Arun Basil Lal
- New Recruit
- 695 pts: Hero points 0 pts: Rep. points LEVEL 0
Hey UC,

Normally it should, what is the CSS you added? Links please.

If a CSS property is defined twice, the !important specifies which one to use. Try adding that.

For eg:

Suppose two CSS files that are loaded during run-time have these two CSS snippets on each of those:
```
.form-topic {

padding: 15px !important;

}
```
```
.form-topic {

padding: 20px;

}
```
The output will use a padding of 15px.

Read about it here: http://www.electrictoolbox.com/using-important-css/

Let me know how that goes.
uc
- The Incredible Code Injector
- 152 pts: Hero points 338 pts: Rep. points LEVEL 5
Hi Arun,

Thanks for quick response. I did try

!important. .

without success.

this excerpt from the child theme

/* begin child theme css style here */

/*

rename this to child-style.css

any custom css can be input here to prevent any css edit missing when version updates to themes

to effective overide some css used #custom first id hack

sample:

#custom .myclass {} or used !important for better css hack overide

sample

#custom .myclass {

color: #fff !important;

size: 14px !important;

}

try not to touch the css from other stylesheet for better and easy updates.

*/

/* 58429-1329269269 */

;

#custom .wrapper {font-size: 0.785em; margin: 0px auto 0em; width: 960px !important; padding: 0px;}

#custom .navigation .rss-feeds {margin: 0px; padding: 0px; float: right; height: 28px; width: 100px; line-height: 20px; font-size: 1em; color: #FFFFFF;}

#custom .container {margin: 1.125em 0px 0px; padding: 20px 20px 15px; float: left; width: 920px !important; background: #FFF !important;}
Arun Basil Lal
- New Recruit
- 695 pts: Hero points 0 pts: Rep. points LEVEL 0
Can you give me a link to the page that needs change and tell me what you are trying to accomplish? Maybe the CSS selectors are wrong?
uc
- The Incredible Code Injector
- 152 pts: Hero points 338 pts: Rep. points LEVEL 5
Hi Arun,

I have been staging on the localhost but I can replicate it on the hosting environment. Is it possible to send you the link by email
Arun Basil Lal
- New Recruit
- 695 pts: Hero points 0 pts: Rep. points LEVEL 0
Oh yes, Send it via our contact forums: https://premium.wpmudev.org/contact addressed to me :slight_smile:

But before that, I will be clueless if I don’t know what you are trying to accomplish. Let me know!
uc
- The Incredible Code Injector
- 152 pts: Hero points 338 pts: Rep. points LEVEL 5
Hi Arun,

I have sent you the link.

These are the things I want to do

1. Change the width of the wrapper, content, site-tile areas

2. Add a second horizontal menu above the main navigation ie below the top header image.

3.Also toke the tagline visible if use image logo in place of Text on site tile are.

Currently it logo replaces the site title as well as the tagline

Thanks

UC
Arun Basil Lal
- New Recruit
- 695 pts: Hero points 0 pts: Rep. points LEVEL 0
Hey UC,

The attached child theme has everything you need. you were using wrong css selectors before. It might be crude, but I guess you can handle it from here, do Let me know!

See the screenshot attached. Good luck!
uc
- The Incredible Code Injector
- 152 pts: Hero points 338 pts: Rep. points LEVEL 5
Hi Arun,

Thanks for your help. I have been able to make the necessary adjustments and its working. Concerning the selector, this what the instruction says on how write the custom css

this excerpt from the child theme

/* begin child theme css style here */

/*

rename this to child-style.css

any custom css can be input here to prevent any css edit missing when version updates to themes

to effective overide some css used #custom first id hack

sample:

#custom .myclass {} or used !important for better css hack overide

sample

#custom .myclass {

color: #fff !important;

size: 14px !important;

}

Thanks

UC
Arun Basil Lal
- New Recruit
- 695 pts: Hero points 0 pts: Rep. points LEVEL 0
Ah, CSS is universal, at least now its working fine, so glad to hear that :slight_smile:

Do you want wish to know on how to find the right css selectors? Let me know if you are interested :slight_smile:
uc
- The Incredible Code Injector
- 152 pts: Hero points 338 pts: Rep. points LEVEL 5
Hi Arun,

The instruction in theme says to follow this example

sample

#custom .myclass {

color: #fff !important;

size: 14px !important;

}

which I did, but that did not work except when you use

#myclass{….}

I would like to know the correct selector. Also if that instruction is not right I would suggest for it to be removed to avoid confusion

Thanks

UC
Arun Basil Lal
- New Recruit
- 695 pts: Hero points 0 pts: Rep. points LEVEL 0
Hey UC,

The instructions are not specific to the theme, but in general , showing that's how css works.You cannot define a new class in the css file, unless you go ahead and use them in the theme files.

If you are on Firefox, install a plugin called Firebug and use the inspect element with Firebug from the right click menu to find the necessary css selectors.

See the screenshot attached. That's how the Firebug console looks like.
uc
- The Incredible Code Injector
- 152 pts: Hero points 338 pts: Rep. points LEVEL 5
Hey Arun,

Thanks for your help. Though issue is that the instruction is referring to using customcss stlye so adding that #custom.myclass it look like that custom is needed see the excerpt

“rename this to child-style.css

any custom css can be input here to prevent any css edit missing when version updates to themes

to effective overide some css used #custom first id hack

sample:

#custom .myclass {} or used !important for better css hack overide “

Uc
Arun Basil Lal
- New Recruit
- 695 pts: Hero points 0 pts: Rep. points LEVEL 0
I hear you, it can be a bit misleading, yes.

I will pass this on to the team :slight_smile:
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
@UC, as the issue is now resolved, I am going to mark this thread as resolved. Should you have any questions, please feel free to post and mark it open.

Cheers

PC
uc
- The Incredible Code Injector
- 152 pts: Hero points 338 pts: Rep. points LEVEL 5
That’s ok PC

Thanks

UC

custom css

Learn more

In The WordPress

Resources

Recent Blog Posts

Learn more

How do you rate me?

Thank you for rating your experience!