More Tips about Changing Themes: Aligning the Blockquote

Yes, I’m back to The Entrepreneur (for now).   If you read me regularly, you may have seen me try on the “Heart and Style,” “Lenscap” and “Traveler” themes– but I’m back to the old theme –with some lessons learned and more CSS tricks to share.

Lessons Learned

Lesson One: I completely lost all my custom CSS when I changed themes. This should’ve been expected. The additional CSS we add gets put on as an addition to that theme’s page.  If you like your little CSS tweaks, put them somewhere, like a Google Spreadsheet or an Airtable.   Then you can re-add them to your new theme with “cut and paste.” 

This additional CSS RETURNED when I went back to The Entrepreneur theme.  You can go back to your old theme and cut and paste your custom CSS to your new theme as another kind of work-around.

Lesson Two: Get consistent with your image sizes if you’re going to use a slider.  I admit, I was sloppy.  I own Adobe Creative Cloud and like to use it for my images–and sometimes I would vary the canvas size, trying things out.   I didn’t like sliders at the top. They’re too big and REALLY?  I found them boring after the first week.  I would have to rotate the featured content and frankly, as a one-woman show with under 100 posts, I don’t have enough content to make that work.

If you’re using Canva or Crello, this would still be an issue after about 50 posts.

More CSS Tricks

One of the things I really liked about the Heart and Style theme was it’s lovely “big quote mark” blockquote style.  I also found a theme call Resonar that creates blockquotes that align to the left or right, rather than being in the center.  That’s an easy CSS fix!

Creating variations on blockquotes

We can create various styles of blockquotes (and other “selectors” like the header tags (H1, H2, etc.) and the paragraph tag by setting up new classes for them.

Previously, we set up an entirely different default blockquote style for the Entrepreneur.  We changed the color of the background to yellow, we fiddled with the the borders a little bit, nothing too outrageous.

This is the old blockquote style.

The default blockquote aligns to the center and takes up the whole space of the column.

I rather like the align to the left (sometimes) or to the right (other times) model of blockquotes in Resonar, so I created two new classes of blockquote: .alignleft and .alignright.

This is a test of the new alignright blockquote.

Notice that this takes up half the space and lets me wrap text around.

Here’s the new alignleft blockquote.

I have to put the text I want to wrap around UNDER These aligned blockquotes when I use them, rather than before them, like so in, if I’m editing in the  HTML format.   This isn’t intuitive.  I often have to jump between the HTML editor and the Visual Editor to get this right.

Setting up Custom CSS for Themes

Here’s my introduction to getting access and editing custom CSS in your theme.  Quick recap: I suggest you open up a new tab first to see your dashboard in another window.   Then choose the Themes Customize option.  Then there will be an option called Additional CSS.  It will look something like this–it will be down at the bottom:

Screen Shot 2018-03-25 at 11.57.45 AM.png

 

The CSS code

We’ll set up  a class for the blockquote called “alignright.”   This is a simple single piece of code that adds a  bit to our default for the blockquote. Classes all begin with a period.  I’ve called these two new classes .alignright and .alignleft  — I could just as easily called them .right and .left –or anything.   It’s important to make the names descriptive so that you can remember them when you want to change the code.

Code Example


.alignright blockquote {

text-align: right;
}

We do the same for align left with:

.alignleft blockquote {

text-align: left;

}

 


And then hit publish.   Easy-peasy.

Using the Custom Blockquote

Now, we can use the new blockquotes by calling up the HTML or Text Editors in WP. 

You manually enter the code:  <blockquote class=”alignright”> Your text goes here. </blockquote>

You can actually call it anything you like such as .left and .right — just remember to give your class names enough detail so that you remember them especially as you try to get really fancy. 🙂

More soon on Troubleshooting CSS Experiments.

Author: Lola

Recovering academic, real-life, honest to cornflakes anthropologist (Ph.D. and fieldwork and everything), tech-head and social media researcher.

3 thoughts on “More Tips about Changing Themes: Aligning the Blockquote

  1. Lesson Two: Get consistent with your image sizes if you’re going to use a slider.

    What is a slider? Why do they change after 50 post?

    1. A slider is a “slide show” of featured post, typically at the top of the home page. The theme I used was Heart and Style; you could put up to fifty posts into the list of posts for that “slide show” by using the tag “featured” for each post. The theme would grab any post with the tag “featured” and put the featured image into the slide show–with an appropriate link back to the post. It’s kind of cool, but I want more control over that slide-show. I want to be able to size the images so that they’re smaller.

Leave a Reply