order of precedence for styling
May 17, 2014 at 10:04 pm #15146
just installed Lum pro & child for a friend’s site and I’m fooling around trying to understand things before I dive in and break things
There are several things that can be styled in the Customize menu, and I see that changes there are not reflected in the child’s style.ccs. Correspondingly, I can’t seem to change properties in the Customize menu at the style.css level.
Am I correct in presuming that whatever’s in the Customize menu should be changed there, and anything else not there can be changed directly in the css?
You recommend using Jetpack as an alternative for styling. What would happen if I install & activate the Jetpack css editor, how does it play with Luminiscence? Would it take over and save changes in Lum child’s style ccs or add a third styling layer? — I presume the Customize menu options would still take precedence over anything else
AlfredoMay 17, 2014 at 10:52 pm #19901Sushil AdhikariModerator
Hi Alfredo…I’m here to help you out. My first question would be, did you create a custom menu or using the default menu (pages only)?
Jetpack is just one option of a few, but jetpack also contains a lot more built in plugins of different things. For the Edit CSS, it adds this to the Appearance menu in the admin which you can use to override any CSS from the theme. Basically it will create a new stylesheet with your changes, in turn, helps when you update the theme at any point without losing your modifications. However, a child theme is needed if at any time in the future you decide to edit the actual files of the theme.
It should not matter if you are using the child theme or the parent theme, Jetpack will work for both as the child theme simply inherits everything from the parent theme’s CSS and functionality. I believe it would take over css changes you add to the child theme (but you may want to try that because off hand, its only my guess, but I don’t see why it shouldn’t.
About the customizer and any menu CSS overrides you do, the overrides should work. It depends on where the new stylesheet from jetpack loads. If it loads after all theme styles including those in the portion of your page code, then yes.May 18, 2014 at 10:22 am #19902
I will use the child theme, as it’s possible that at some moment I may need to go into the files, yes. In that case I see Jetpack more as a convenience for my friend afterwards, as she gets just the one option in the menu clearly stating ‘Edit CSS’. And possibly Jetpack has some other things that’ll be of use for her too. I’ll look into that.
The menu is custom, so far, in that I started changing colours, and I’ll start changing width, position and a couple of other things. When I tried to change colours in the stylesheet I discovered later that those changes regarding options accessible through ‘Theme | Customize’ do not work, so I’ll have to change things in two different places. Not a problem, as it’s logical once I think about it. As you say, I’ll have to test Jetpack and see whether it works the same way.May 24, 2014 at 3:08 pm #19941
Right, I’ve been experimenting, and I’m going with Lum Child and using Jetpack for the CSS. Works very well, except where the theme customizer takes precedence. In particular, I’m trying for transparency for certain elements, but the theme customizer only allows for defining colours in hex.
I checked with firebug and I can isolate those elemnts alright and transparency/rgba & opacity work well enough for a start. I guess I’ll have to dive into the child’s files and make some changes there.
If you could point me to to right files? Then there’s the question of not letting the menu customizer to override that change, but we’ll see…
In the customizer the elements are called ‘content background’ and ‘color background’. The elements I changed to transparent in firebug are .row-fluid and #bottom-wrapper
The attached screenshot is the firebug result
Attachments:You must be logged in to view attached files.May 24, 2014 at 9:26 pm #19943Sushil AdhikariModerator
Thanks for the info of the customizer settings because I had to think, OK, where did I put that….
The “content background” is in the header.php file which looks like this:
<div class="row-fluid lum-equal-wrap" style="background-color: ">
The php code there is what sets the customizer inline style for the container.
Basically any customizer php code you see like:
….is what does the styling from the customizer, but as you pointed out, it only does HEX colours. This is one of the limitations of the WordPress Customizer (a core function). Anything you want to change to an rgba means removing the php code on whichever elements you need to change in the theme files.
Caution to any modifications you make to the bootstrap containers like “row”, “row-fluid”, “container”, and the spans that you see like span8, span4…etc. Ultimately you should not modify these.May 25, 2014 at 2:02 pm #15147
Great! thanks!! worked excellently 🙂
- You must be logged in to reply to this topic.