U-Design Theme and Using Google Chrome

Author Posts

Duplada

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

I am new to Microthemer also WordPress and CSS,
I am using the U-Design theme and have downloaded and installed the U-Design Microtheme.

I have watched your videos and would like some clarification on a few points, if I had realised there is very little documentation with this plugin I would not have purchased. As your video’s are not that easy to follow for someone who has no experience at all.

If I choose not to set “Disable Active Theme’s style.css: in preferences (as suggested), then when I make a modification via Microthemer am I modifying the U-Design’s default style sheet? as when I disabled the themes CSS (as suggested in the video) it altered the default U-Design theme significantly, and I don’t want to have to go through every page altering all the styles back to how the original U-Design theme looks.

If I am modifying the U-Design themes CSS style sheet by not disabling it. Am I better setting up a child theme to stop any updates amending the changes I may make with Microthemer?

Finally I use Google Chrome (latest update) as my default browser and have problems using Microthemer with it. The problem I have is that when using Microthemer in visual mode and select “show editing” the Save Button to the right of the style editing window is not displayed, therefore it is not possible to save any modifications that are made. I installed Firefox today and that works as shown in the videos and the save button is displayed. Is there any settings in Google Chrome that would stop the save button from being displayed.


Sebastian

Hi there,

I’m sorry you’ve found the documentation a little thin. I’m happy to answer any questions you may have here any time.

1. The option to “Disable Active Theme’s style.css” on the preferences page is for rare occasions when an experienced user wants to start from scratch without having to think about any styles coming from the main style.css stylesheet. You do not need to enable this option by the sounds of things.

Microthemer never modifies U-Design’s default style sheet. It simply creates an additional stylesheet called active-styles.css. The Theme Pack you installed for U-Design contains all the theme-specific CSS selectors that allow the styles you define in Microthemer to override the styles in the parent theme’s default stylesheet. It achieves this by exploiting something in CSS called “CSS specificity” (which is basically a rule that says a more specific CSS selector (e.g. “p.intro”) will override a less specific CSS selector (e.g. “p”) and that if 2 selectors are equally specific, the later will override the former)

2. Updating U-Design will not override the styles you create in Microthemer. For this reason you are not required to use a Child theme. However, if you have the technical skills to set up a child theme, there is no reason why you shouldn’t. Microthemer will work the same with a child theme active and it’s generally considered good practice in WordPress to use child themes.

3. I was not aware of this problem with Chrome. I will make fixing the issue a top priority and write back here when it is fixed.

I hope that’s helped clarify a few things. Please let me know if I can be of further assistance.

Regards,

Sebastian


Duplada

Hi Sebastian,

Thank you for your prompt and detailed reply.

I understand now, about the disabling of the themes style sheet in the preferences ,and more about how Themover works in conjunction with it.

Whilst my admission of being new to WordPress, CSS, and Themover, makes me sound like a bit of a dummy, I have 30 years programming experience, am a quick learner, and can usually sort issues out from the documentation. Since there really isn’t any documentation, and coupled with the fact I was using Chrome (with the save button issue) you can understand the frustration I was experiencing.

I can see that your software is going to be a big help once I get to grips with it. I just wish there was more documentation to help this process.

To help with the learning process I have installed Firefox along with the add on’s that you recommend.

If I can’t figure anything else out in the future I will contact you again.

What would be a really good addition to your software would be for it read the Theme style sheet (rather than using a Firefox add on) when you select a page object, and to show you the objects various properties, and if the Themover style was modifying the object. If you then modified the object it would write to the Themover style sheet modifying the resulting object style. I know you will probably say this is too difficult to achieve, however, this would be a very neat addition saving lots of time.

kind regards Keith


Sebastian

Hi Keith,

Thanks for your feedback. There are 2 advanced features on the development road map that may actually provide some of the functionality you’ve suggested, or at least make your specific suggestion less necessary.

I can understand your initial frustration. I prefer to get by on documentation too, and the documentation is incomplete at the moment. I was holding off adding more tutorials until version 2 of Microthemer is released (to save having to redo lots of screenshots) but I may reconsider that now.

Now on to that Chrome issue…


Sebastian

I’ve figured out what’s going on with Chrome and the save button. It seems that as of Chrome 22, Chrome has completely changed the way it handles a fundamental aspect of CSS (namely position:fixed and z-indexing).

Here’s a quick fix for you (I will try to come up with a way of solving this problem that doesn’t involve tweaking Chrome’s settings in future):

1. Launch Chrome
2. Enter “about:flags” in the search bar at the top (without the quotation marks). This will take you to a hidden settings page.
3. Hit Control+F and search for “fixed position elements create stacking contexts” to find the relevant option on the page
4. Change the value for this option from “Default” to “Disabled”
5. A “Relaunch Now” button will appear at the bottom of the page when you make the change. Click the button.
6. Chrome will now behave the way it used to, and the same way every other browser still does with regards to position:fixed and z-indexing
7. Go to Microthemer and you should find that the save button appears in the visual editing view

Cheers,

Sebastian


Duplada

Hi Sebastian,

Thank you for the quick reply. I have followed your procedure and can confirm that Chrome now has the save button displayed.

Thank you for fixing this so quickly.

regards Keith


Sebastian

You’re welcome 🙂


Sebastian

Hi Keith,

I’ve just released an updated Theme Pack for U-Design (tailored to U-Design version 1.8), which contains alterations to 3 of the selectors. You can download it here: https://themeover.com/blank-u-design/ or implement the changes yourself. The 3 changes are listed at the bottom of the page I just gave you a link to.

Cheers,

Sebastian


Duplada

Hi Sebastian,

Thanks for updating the thread and advising of the updates that you have made to the U-Design template. I have downloaded it and things seem to perform better now in the bottom widget area.

I had noticed something else with one of the selectors that does not seem correct. However, I was going to leave it until next week seeing as I have been giving you a hard time this week 🙂

If you look at the demo U-Design site default home page http://www.universallyacclaimed.com/wp-themes/u-design/

You will see in the “Home Page Widget Area” a row with titles such as “SEO Optimized and Solid Build” which are titles but also links. In the row underneath there are two more titles “Why Choose Us and and Explore the Endless Possibilities” which are titles but are not links. If you use Microthemer and select the “Home Column Widget Title” both of these rows of titles are highlighted. If however, you say change the font colour, then only the bottom row (none linked titles get updated) is this because the link style in the top row of widgets is inheriting the colour style for the link object instead? or should the top row of widgets not be selected because they are links also.

Let me know.

kind regards Keith


Sebastian

Hi Keith,

Apologies for the delayed reply. I was away for my birthday over the weekend.

You are absolutely correct that the links are taking their colour from a style definition applied to links. Both the non-links and links appear to be highlighted by Microthemer because the links have a h3 parent element (which is actually what is being highlighted in both cases).

What you need is a way to target the links separately. I will add this selector and release an updated version of Blank U-Design. But in the meantime, this is what you can do yourself to solve the problem.

1. From the default view, open up the “Home Page Column Widget Areas” section
2. Click the “Add New Selector” button
3. In the “CSS Selector” textarea, enter the following:
#content-container .cont_col_1 h3 a,
#content-container .cont_col_2 h3 a,
#content-container .cont_col_3 h3 a,
#content-container .cont_col_4 h3 a

4. Enter “Home Column Widget Title Link” in the label field
5. Click the “Add” button
6. The selector will appear at the bottom of the section
7. If you want to keep things organised, click the “Enable Sortable Selectors” button.
8. You can now drag the selector up so that it comes directly after the “Home Column Widget Title” selector
9. Click the “Disable Sortable Selectors” button (the same button that enabled sorting)
10. You can now apply styles to your newly created selector and they will affect only the links

Note: If you want to style links in a hover state, you can repeat the steps outlined above but give the new selector the label “Home Column Widget Title Link Hover” and enter the following in the the “CSS Selector” textarea:
#content-container .cont_col_1 h3 a:hover,
#content-container .cont_col_2 h3 a:hover,
#content-container .cont_col_3 h3 a:hover,
#content-container .cont_col_4 h3 a:hover

Let me know if you run into any problems.

Cheers,

Sebastian


Duplada

Hi Sebastian,

I have created the new selectors as described above, and all works as expected.

Many thanks for your help.

regards Keith

You must login or register to reply to this topic.