Using custom CSS with Jishnu

A quick video example, showing how to use some custom CSS to change a specific text color in Jishnu with the help of Google Chrome:


A few other things that might help you (this is a work in progress)…



1. Not mentioned in the customizer, you can set a max-width as the theme’s total width. Simply add the word “max” to the pixel length you’re typing. Example: “1080max” or “max-width:1080px” (Jishnu looks for the word “max” in the string and then uses whatever number it finds). If using a max-width of above 640px, a min-width of 640px will automatically be set, since the layout usually starts getting pretty crushed by then. You can override this by plunking the following into the Custom CSS section in Advanced Options:

.pageContainer{min-width:700px !important;} (this would set a 700px min width)

2. A percentage can be used for widths as well (theme total, or sidebar). If the theme total is a percentage, the same min-width mentioned above will be applied. Jishnu *is* picky about the formatting of these in the customizer. You can not use spaces, and the % sign must come after the number. Examples:  20% 100% 35% will all work. If using a percentage for a sidebar, be sure to widen/shrink your browser width to make sure that items inside which do not shrink well do not overflow (Adsense, search bar, etc). If you need to add a minimum width here, the custom CSS would be as follows:

.contentWrapper .sidebarsLeft{min-width:190px !important;}
.contentWrapper .sidebarsRight(min-width:250px !important;}

3. For all intents and purposes, treat the iPhone 5 and iPad 3 as though their actual screen width is about 980px (though text on the iPhone gets quite tiny by that point). If you use a fixed width above that, iPhone users will have to use their finger to pan left/right. For iPad users, the text will keep shrinking for a while yet beyond 980. If you use a fixed width below 980px, everything gets a little more zoomed (better for the iPhone, but senseless for the iPad). For % (or a max-width of above 980px), 980px is assumed to be 100% (and the max-width) by both devices.I may add an Advanced Option at some point to add some iPhone-specific CSS in the future since the text (and buttons) all have the potential to get kinda small on the iPhone right now.


Header “designs”

1. These are output by the theme itself (they’re not located in the CSS file).

2. If you have a custom CSS design you’ve created (or found on the web), disable the header designs in the Customizer and use the following CSS in the custom CSS section to insert the following with your code between the {} :

.headerDesign0{} .headerDesign_shell_0{}


<< back to Jishnu