CSS – bbird.me http://bbird.me WordPress quick tips Wed, 08 Aug 2018 16:39:07 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 How to center HTML element with absolute positioning http://bbird.me/how-to-center-html-element-with-absolute-positioning/ http://bbird.me/how-to-center-html-element-with-absolute-positioning/#respond Sat, 07 Jan 2017 12:48:11 +0000 http://bbird.me/?p=591 Believe it or not, something like this will do: [crayon-5be7f29fb188a950079416/] You can also center the content using text-align. Now as

Post How to center HTML element with absolute positioning je prvi puta viđen na bbird.me.

]]>
Believe it or not, something like this will do:

.element
{
left:0;
right:0;
position: absolute;
width: 100%; //would be nice, also
}

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 How to center HTML element with absolute positioning je prvi puta viđen na bbird.me.

]]>
http://bbird.me/how-to-center-html-element-with-absolute-positioning/feed/ 0
Purging a stubborn WP Engine CSS cache http://bbird.me/purging-stubborn-wp-engine-css-cache/ http://bbird.me/purging-stubborn-wp-engine-css-cache/#comments Tue, 13 Sep 2016 18:25:36 +0000 http://bbird.me/?p=549 Here is the scenario – you created that awesome CSS and are dying to get it online. The client also.

Post Purging a stubborn WP Engine CSS cache je prvi puta viđen na bbird.me.

]]>
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 and again and again and that old style.css is still there.

But I’ve got a quick trick for you – version your file! As you already know, the proper way to enqueue style or script in WordPress is the following:

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( ), '1.0.0');

The number 1.0.0 is the style version which is not always included. If you want to make sure that after every cache purging the new version is loaded, you only have to change the version number. So if you put something like:

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( ), '1.0.1');

after you have added new changes into style.css and if clear the cache after that, the new CSS version will be loaded immediately and a ton of your nerves (and your clients’ nerves) will be saved.

You’re welcome!

(yes, this happened to me, well, countless times…)

Post Purging a stubborn WP Engine CSS cache je prvi puta viđen na bbird.me.

]]>
http://bbird.me/purging-stubborn-wp-engine-css-cache/feed/ 2
Sass Quickstart http://bbird.me/sass-quickstart/ http://bbird.me/sass-quickstart/#respond Mon, 14 Mar 2016 12:02:38 +0000 http://bbird.me/?p=420 First things first – I use SCSS Syntax. Also, you need a compiler – I use NetBeans (Koala is also

Post Sass Quickstart je prvi puta viđen na bbird.me.

]]>
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 :-).

Directory structure

I’d say this is up to:

  1. personal preference
  2. project requirements
  3. … and few other things.

You can go with something like:

style.scss

partials/_base.scss

partials/_grids.scss

partials/_typography.scss

...

vendor/_jquery.scss

...

etc.

Partials

As you can see in the above structure, there are partials – this is the word you use for Sass files. It is a nice way to structure CSS, based on the layout, project type, etc.

Import

Use the @import clause for importing partials into the main (compiled) file. Normally you would put import clauses into the main style.scss file and the syntax would be something like the following:

// Modules and Variables
@import "partials/base";
@import "partials/buttons";
@import "partials/grids";
@import "partials/typography";

Notice that you don’t need _ or .scss suffix.

Variables

Yes, these are the variables you see in other programming languages. In _base.scss partial, you can put something like:

$primary-color: #333;

And you would call it like:

body {
  color: $primary-color;
}

But in _buttons.scss partial, you could also use the following, and without the need of redeclaring this variable:

button {
    background: $primaryColor;
}

But needless to say – if you want to reuse this variable across other partials, make sure you define it in _base.scss file (or whichever partial will be imported first), possibly on the top, before this variable has been used. As you know, in CSS, whatever comes last takes the precedence. And there is a quite big chance that your CSS file will not be compiled at all, as the compiler would return an error ( something like variable not declared or so).

Mixins and @include

Now Mixins is an excellent topic. Let the show you few mixins and notice that they use @include clause:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

And this is how you would call it in our example:

.box { @include border-radius(10px); }

But there is absolutely no reason why wouldn’t you use it again:

.box-wider
{ @include border-radius(20x); }

And you would get the following result:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

.box-wider {
  -webkit-border-radius: 20x;
  -moz-border-radius: 20x;
  -ms-border-radius: 20x;
  border-radius: 20x; }

I guess you are already asking – do I have to write all these mixins, or has someone already done this before? Sure they did it – and a lot of people did it! You can find an extensive list on this blog post, While you can find also some of them on my resources page.

Inheritance

Why bother with redeclaring the styles, when you can use an @extend clause. It would go like:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

And the CSS result will be:

.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

Nesting

If you use the following:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

You would get:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

 

Post Sass Quickstart je prvi puta viđen na bbird.me.

]]>
http://bbird.me/sass-quickstart/feed/ 0
How to add custom CSS class depending on the template http://bbird.me/how-to-add-custom-css-class-depending-on-the-template/ http://bbird.me/how-to-add-custom-css-class-depending-on-the-template/#respond Tue, 01 Mar 2016 15:11:12 +0000 http://bbird.me/?p=388 I know that you can achieve the same by using global variables, but this is also one of the ways

Post How to add custom CSS class depending on the template je prvi puta viđen na bbird.me.

]]>
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):

function add_new_class(){
	
if (is_page()) {
    return "page";
} elseif (is_single()) {
    return "post";
} else {
    //add other elseifs
}
}

While inside page template, you would use something like:

<header class="entry-header <?php echo $new_class = add_new_class(); ?>">

The final result would be:

<header class="entry-header post">

or something like:

<header class="entry-header page">

I’ve also posted this as an answer on Stackexchange, so if you find this useful, do not hesitate to vote me up :).

Post How to add custom CSS class depending on the template je prvi puta viđen na bbird.me.

]]>
http://bbird.me/how-to-add-custom-css-class-depending-on-the-template/feed/ 0
How to highlight parent menu item when hovering over submenu item http://bbird.me/how-to-highlight-parent-menu-item-when-hovering-over-submenu-item/ http://bbird.me/how-to-highlight-parent-menu-item-when-hovering-over-submenu-item/#respond Thu, 25 Feb 2016 10:06:44 +0000 http://bbird.me/?p=371 If CSS on your website works in a way where when hovering over any of the subitems, the main item

Post How to highlight parent menu item when hovering over submenu item je prvi puta viđen na bbird.me.

]]>
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:

#nav ul li:hover > a {
    background-color: #000;
    color: #FFF;
}

Needless to say, it is up to you which styles to choose, but make sure that the ID (or class) matches the code on your website.

Post How to highlight parent menu item when hovering over submenu item je prvi puta viđen na bbird.me.

]]>
http://bbird.me/how-to-highlight-parent-menu-item-when-hovering-over-submenu-item/feed/ 0
Auto compile Sass on save in NetBeans http://bbird.me/auto-compile-sass-on-save-in-netbeans/ http://bbird.me/auto-compile-sass-on-save-in-netbeans/#respond Sat, 12 Sep 2015 09:24:48 +0000 http://bbird.me/?p=245 If you’re developing WordPress websites in NetBeans, there is a chance that you will edit CSS using the Sass approach. In

Post Auto compile Sass on save in NetBeans je prvi puta viđen na bbird.me.

]]>
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 easy to set this up, but you may Google that many developers are having trouble doing it the right way.

I am assuming that you have NetBeans installed and WordPress project created. The steps are as follows:

Download the latest Ruby from http://rubyinstaller.org/downloads/ and install. When installing, make sure you thick the middle option:

ruby

The next step is to install Sass from command promptopen command prompt and type the following:

gem install sass

Upon successful installation, several new files appeared in your Ruby folder – one of them is sass.bat you will need.

Now open NetBeans, open Tools -> Options and point to Miscellaneous. This is where you will select your Sass processor. If you installed Ruby in default path, you will have something like this:

sass1

Restart NetBeans after that (some users reportedly had to do it, so just in case 🙂 ).

Completing these steps doesn’t mean that your Sass files will be processed – this is where most tutorials finish, forgetting the most important thing – setting the Sass file path! This is how you do it:

  1. Right click on the project name and click properties.
  2. Now, refer to the next image that will give you an idea on how to set input as output paths for Sass preprocessor. In my case, WordPress root directory is the projects’ root directory, hence the path I added.

sass2

And there you go – make a change in any of the partials or the main file, and providing there are no errors (undeclared variables, etc), Netbeans will compile main CSS file.

Post Auto compile Sass on save in NetBeans je prvi puta viđen na bbird.me.

]]>
http://bbird.me/auto-compile-sass-on-save-in-netbeans/feed/ 0
Adding CSS3 transitions to WordPress drop-down menu based on Foundation http://bbird.me/adding-css3-transitions-to-wordpress-drop-down-menu-based-on-foundation/ http://bbird.me/adding-css3-transitions-to-wordpress-drop-down-menu-based-on-foundation/#respond Sat, 30 May 2015 15:19:30 +0000 http://bbird.me/?p=157 If you want to add CSS3 transitions to a WordPress drop-down menu on a website based on Foundation framework, you only need to

Post Adding CSS3 transitions to WordPress drop-down menu based on Foundation je prvi puta viđen na bbird.me.

]]>
If you want to add CSS3 transitions to a WordPress drop-down menu on a website based on Foundation framework, you only need to add some CSS classes and some CSS code, without any requirement for jQuery or some other JS library.

The first thing is to add either class or ID (your choice) to the first container above the first level <ul> element. Let me show you an example on a FoundationPress theme, a starter-theme for WordPress built with Foundation, built by Ole Fredrik Lie. Needless to say, I highly recommend this theme for any WordPress project based on foundation (it has custom walker class implemented – do I need to say more? 🙂 ). So this is the code:

<section class="top-bar-section">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
</section>

And this is where you would add CSS class or ID. Let’s use .fd-animate class for now:

<section class="top-bar-section fd-animate">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
</section>

And now all that we need is CSS (this theme is using Sass, but I will show “pure” CSS  for those who don’t use the Sass approach):

.fd-animate ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 1.2s ease-out;
  -moz-transition: max-height 1.2s ease-out;
  -ms-transition: max-height 1.2s ease-out;
  -o-transition: max-height 1.2s ease-out;
  transition: max-height 1.2s ease-out;
}

.fd-animate ul li ul li:hover > ul > li {
  max-height: 100px;
  height:auto;
  position: relative;
}

.fd-animate > ul > li:hover > ul {
  left: 0;
}
.fd-animate > ul > li:hover > ul > li {
  max-height: 100px;
  height:auto;
  position: relative;
}

.fd-animate > ul > li > ul {
  width: auto;
  min-width:200px;
  display: block;
}

For positioning purposes, you may want to overwrite default foundation CSS:

.top-bar-section .right li .dropdown {
  left: 0;
  min-width:200px;
  right: 0;
}
.top-bar-section .right li .dropdown li .dropdown {
  left: 100%;
  right: 100%;
}

.top-bar-section .dropdown li a {
  white-space: normal;
}

This may be a bit rough code which you can modify for your purposes, but the main point is that it covers the idea of adding transitions to WordPress drop-down menu based on foundation framework.

 

 

 

Post Adding CSS3 transitions to WordPress drop-down menu based on Foundation je prvi puta viđen na bbird.me.

]]>
http://bbird.me/adding-css3-transitions-to-wordpress-drop-down-menu-based-on-foundation/feed/ 0
Adding CSS transition on Bootstrap drop-down menu http://bbird.me/adding-css-transition-on-bootstrap-drop-down-menu/ http://bbird.me/adding-css-transition-on-bootstrap-drop-down-menu/#comments Fri, 15 May 2015 19:38:05 +0000 http://bbird.me/?p=126 If you implemented bootstrap into your WordPress template and want to add CSS transitions to drop-down menu, you can use

Post Adding CSS transition on Bootstrap drop-down menu je prvi puta viđen na bbird.me.

]]>
If you implemented bootstrap into your WordPress template and want to add CSS transitions to drop-down menu, you can use the following code:

@media (min-width: 768px) {
.dropdown .dropdown-menu{
    display: block; 
  opacity:0;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}
}

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 any of the online generators, such as this one.

Post Adding CSS transition on Bootstrap drop-down menu je prvi puta viđen na bbird.me.

]]>
http://bbird.me/adding-css-transition-on-bootstrap-drop-down-menu/feed/ 4