Change theme colors and centering columns

[Carrie Green]

Firstly I would like to say thank you to Styled Themes for your hard work and attention to detail in this beautiful theme. This is my very first attempt at using wordpress but I selected your themes because of their beautiful styling and presentation, and although I could see there was a lot included, I couldn’t appreciate exactly what it all meant until I started to create my site. Your tutorials and documentation have really helped me to get going and I am immensely grateful.

I do have a question in relation to the colors you have set in the theme. Is it possible to change the color codes for aqua, orange and green site-wide? I require slightly different shades of those colors for my client’s corporate ID and there is enough of a difference between the in-built colors and my clients’ to cause a clash. I can see many instances in the style.css sheet in the parent theme where it specifies the codes for those standard colors, but as I am new to this I didn’t want to change them without checking first, in case I break your beautiful theme! I am using the child theme but am not sure if this is where I would put some new colors.

My second question relates to the media box columns. I worked out how to add an extra column to your demo site layout and changed the size to col-md-2 width, however I cannot figure out how to make those 5 columns centre under the text. I thought perhaps I needed to add a single empty column first so that they media boxes started in column 2, but this hasn’t worked. Please help 🙂 I have attached a screenshot of my page so far as well as a text file with the code. (Please note the banner image is only a placeholder while I work things out so I realise that the text over the top of it is not styled correctly yet …)

Cheers and thank you for any assistance in advance 🙂
Home-page-code.rtf

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Thanks Carrie for your great comment 🙂

As for changing the colours, you can yes, but this one you will need to create custom CSS to change the elements that have those colours. You have a few options of doing this:

1. child theme and do the modifications in its style.css
2. Simple custom CSS plugin which creates a separate stylesheet with your changes
3. If you use Jetpack, use the Edit CSS feature to do this

As for your other question…sorry but the RTF file format isn’t opening. Best to do a screenshot as a jpg or png. If I understand you correctly, you want to “center” the content in each box?

[Carrie Green]

Thank you for your fast response. I thought there might have been something wrong with the attachments as my png screenshot didn’t appear. I have attached the code and screenshot again.

I have the text centering within the media box columns, but the row of 5 boxes is not centered on the page, so it is offset from the heading and text that sits above it. Hope the screenshot works this time 🙂

Home-page-code.txt
Screen-snapshot.jpg

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

The 5 boxes (columns) are not centering because this theme is laid out with a 12-grid column layout. This means you cannot have 5 go into 12 equally. You can only have 1, 2, 3, 4, 6, or 12 boxes because each divides into 12 equally. So for your layout, you will need to lose one of the boxes or add one more for 6. The only other way of doing 5 boxes would be to go totally custom HTML and make your own columns, but then you will need to know how to code it so that on mobile phones, they will adjust accordingly. The other option is a page builder plugin which basically creates widget sidebars (modules) in a blank page (this theme has a page template for a page builder. Using a page builder plugin will allow you to get 5 in there equally laid out.

[Carrie Green]

ok now I get it, thank you! I thought I could force the columns over in a 12 column grid by having 1,2,2,2,2,2,1 to make up the 12 columns (with the single columns being blank), but I didn’t realise that the column widths had to divide evenly into 12.

I will use the page builder instead as I am totally not ready for custom responsive HTML, being my first website and all 😉

[Sushil Adhikari]

Check out the page builder by site origin (plugin is at wordpress.org). You build your page with a drag and drop method. There are others you can use, even paid ones that are very robust.

[Carrie Green]

Yep I have that one installed and have already created the 5 columns which are now centering correctly except for when it adjusts down to mobile view. The text is fine but the images are aligning left. I am currently reading through all the documentation on the Site Origin site.

This is fun! I’ve been a print designer for 20 years but I’m really enjoying my adventure into web design. Thanks so much for your help and have a nice day 😉

[Author]

Posts