Category: CSS

Post

How to center HTML element with absolute positioning

Believe it or not, something like this will do: [crayon-59c1cd686b120168731175/] You can also center the content using text-align. Now as for width, some say that it is required, but in many cases I didn’t see any difference (I guess this is dependent on the browser). And you’re encouraged to add max-width combined with width:100% values.

Post

Purging a stubborn WP Engine CSS cache

Here is the scenario – you created that awesome CSS and are dying to get it online. The client also. The website is hosted on WP Engine and is using its famous aggressive caching mechanism. You save the changes into style.css or elsewhere and clear the cache. But you still see the old style.css. You do it again...

by 13. September 2016.2. March 2017.
Post

Sass Quickstart

First things first – I use SCSS Syntax. Also, you need a compiler – I use NetBeans (Koala is also good). But these are for Windows users just like myself – I have no doubts that for Linux users, there are much more powerful solutions :-).

Post

How to add custom CSS class depending on the template

I know that you can achieve the same by using global variables, but this is also one of the ways to add custom class depending on which page template has been loaded (you would add this into functions.php): [crayon-59c1cd686b80a027372761/]

Post

How to highlight parent menu item when hovering over submenu item

If CSS on your website works in a way where when hovering over any of the subitems, the main item loses the highlight (hover state), you could try using the following CSS: [crayon-59c1cd686b929910992916/] Needless to say, it is up to you which styles to choose, but make sure that the ID (or class) matches the...

Post

Auto compile Sass on save in NetBeans

If you’re developing WordPress websites in NetBeans, there is a chance that you will edit CSS using the Sass approach. In other words, for every change you make in any of the Sass partials, you will surely want these changes compile into main style.css file automatically. NetBeans offers you this option. And the best of all, it’s very...

by 12. September 2015.2. March 2017.
Post

Adding CSS transition on Bootstrap drop-down menu

If you implemented bootstrap into your WordPress template and want to add CSS transitions to drop-down menu, you can use the following code: [crayon-59c1cd686bd23641655195/] Why media queries? Because you don’t want display:block on hover on the mobile menu (as the hover used for this would double the submenu). As for CSS transitions, you can generate them using...