Some tips for getting the most out of the Front-End CSS Builder
The Front-End CSS Builder is comprised of the following parts:
- Horizontal Navigation bar across the top
- Left Hand Side Bar
- Staging Area for Custom CSS (Middle of left sidebar)
- Custom CSS (Bottom of left sidebar)
The Horizontal Navigation is comprised of links for the elements you may want to style and some common CSS additions, such as border’s, shadows, backgrounds, etc
The Left Hand Sidebar helps you find the elements and their associated CSS tags for styling. Specifically, the Element Selectors Button, when clicked, introduces the buttons across the page for the various elements of your website. Click an element selector and the dropdown in the left hand column reflects the components of that element for styling.
The staging and Custom CSS Editor areas of the left sidebar are where you write your Custom CSS. Keep in mind that, while both will show your updates in real time, the Custom CSS Editor is where you MUST save your CSS in order for it to become active for all visitors.
Issue: My StudioPress Mobile Responsive theme (Executive) looks non-responsive on any mobile device (e.g., iPhone). Brought this issue to the StudioPress Forum. Moderator says that the issue is the Genesis Extender Plugin and not the theme. They have had several reports about this from their members, who use this plugin. Is there a remedy?
Thanks;
Robert
Hey Robert,
Be sure to post all Genesis Extender support questions in our Support Forum where our support team will be happy to assist.
And when you post your question be sure to be more specific as to exactly what’s no longer responsive and why you believe the Genesis Extender Plugin is responsible. I actually just tested this exact scenario, using the Executive Child Theme and Genesis Extender and none of the responsiveness of the Child Theme was affected by the Plugin. There aren’t even any styles added by Genesis Extender (other than any you might add yourself via Custom CSS) that could even affect the way the theme is responsive.
Also, I would love to know where this StudioPress forum post is so I can check it out for myself and address it. As I said, I don’t believe this is even a Genesis Extender issue. And if it is then I’d like to get to the bottom of it and resolve it with the next update, but if it’s not I’d like to clear that up for any other users (and Genesis Support people) who are under the impression that it’s causing this issue.
Eric
Hi Eric,
I posted in the forum, as you suggested. Sorry about that, but just following the StudioPress instructions.
The thread in the StudioPress Forum that I submitted earlier is at: http://www.studiopress.com/forums/topic/executive-theme-mobile-responsive/ . I think you can find this by search for “Executive Mobile Responsive”, the tags I used for my post. The title of the post is “Executive Theme – Mobile Responsive?”.
The issue may stem from not realizing what sort of custom CSS will mess up a Mobile Responsive Theme, if that is what has happened here. Perhaps custom CSS is not usually compatible with themes engineered to be mobile responsive. I am not sure of the type of mobile responsiveness Genesis uses (e.g., media queries, etc.).
Hi Eric,
This is just awesome! BIG time saver for me. Huge compliment to my Firebug plugin! Very nice. I will recommend this to others going forward.
Heretofore, I have not been using the front-end CSS builder. I missed this video somehow explaining this excellent feature.
Robert
Hi.
If I understand this, turning off the plugin would turn “off” whatever Custom Css is causing responsiveness issues. So I have a question. Does the CSs reside in a plugin file? Why wouldn’t the CSs be on a child theme style sheet and still be there after turning off the plugin? I want to use this for a site but I want to make sure I understand where all this CSS goes when you write it in live CSS ( for Dynamik too) I thought, after building, I could remove the plugin….
Yes, currently Genesis Extender is setup in such a way that it needs to be active for the changes it makes to remain in effect. We are, however, considering a way to have your changes “stick” even after de-activating/removing the Plugin.
The style, function and structure changes made by Genesis Extender are hard coded files that are placed in a /wp-content/uploads/genesis-extender/plugin/ folder created by the Plugin. This keeps things separate from both the Plugin and the Child Theme folders to prevent loss of “data” upon updating either the Plugin or Theme. And Dynamik works in a very similar way.
Eric
By the way, Eric..you have some truly impressive communication skills. Most developers….well, that is not what I see. Even though I am guessing you are 20 years younger than me, you are my comment forum email, dare I say ninja (sorry) communicator mentor! Mad skills.
Yes, testimonial away….
Thanks for the kind words Kate.
Eric