CSS

Working on the OptionsBrew.com project (website is powered by Drupal 8) I faced the following responsive table issue while browsing content with a table on smaller screens (phone) Broken Table on a smaller screen Luckily there is a simple CSS workaround: in the .css file add the following to table properties: display: block; overflow-x: auto; like this: table{ border-collapse: separate; border-spacing: 0; width:100%; margin: 25px 0 40px; display: block;…

Working on a project I faced a problem how to align social share buttons. By default I'm not paying much attention to this, but there are circumstances you must provide clean work. So here is the example: These are social share buttons from my blog, as you can see, Facebook button is not in one line with other lines. To fix this, I did a quick Google search and found great tutorial on Github:  Here is my Drupal view - containing social share buttons: <div class="social-share"> <…

Previously I already wrote how to add Facebook like button to your site, using a simple module. Today I'll how how to add floating social share buttons using custom code: Here is an example page: This will work for Facebook, Twitter and Google + buttons: Add this code to your theme files: <div id="pageshare"> <div class="sbutton" id="fb"> <a name="fb_share"type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.…

Today I faced again some interesting thing to create - on hover image to change the background and display text over it Here is how it looks: On the left side, you can see the default image, while on the right side with mouse over. To achieve such behavior in Drupal is pretty simple, a little bit CSS and you are done. Here is my view with div tags and Drupal fields: <div class="image-hover"> [field_images] <span class="image-overlay ">Read Full Article</span> </div…

<p>In part 2 of series how to build a Drupal site from scratch, I'm talking about how to create a subtheme from Bootstrap theme.</p><p>Today I would like to speak how to actually theme it, because just enabled it comes empty,with all files served from Bootstrap mater theme.</p><p>By default Bootstrap theme is set to be 1200px and wider, this is first thing I would like to change for our customers tourism website we are using in thee Drupal series. I don't…

<p>In <a href="http://reinisfischer.com/building-drupal-site-scratch-part-5-custom-fro… 4</a> in tutorial series how to build a Drupal site from scratch, I am showing how to build views. Now let's upgrade them, by adding additional fields and even CSS style.</p><p>Yes, we will add CSS style directly into our views.</p><p>Lets go back to our view tours (if you are new to this series, please read <a href="http://reinisfischer.com/building-…