Home Page Widgets

Hi Montig

In your WordPress dashboard on the main menu go to Appearance > Widgets.

On the far right of the Widgets page you’ll see Widgetized area called ‘Home Page Widgets’.

What you need to do now is click on this Widget area to open it.

Next you need locate the ‘Text’ widget – it has a description of ‘Arbitrary text or HTML’ underneath.

Hover over this widget and you will notice your mouse pointer change to a crossed-arrows symbol.

Now drag the text widget and place it in the ‘Home Page Widgets’ widgetized area.

Just as an example copy and paste the code below and paste it in to your text widget,

<img src="yoursite.com/wp-content/theme/lobster/images/sample1.png" alt="Your Image" class="aligncenter" />
<h3 class="home-widget-title">Text Widget Header</h3>
<div class="textwidget">
   <p>Now you'll have to make two more of these!</p>
</div>

You can give the widget a title also. The ‘Text’ widget allows you to place custom html markup in to your widget.

If you save the widget now and look at your homepage you’ll find the original widgets have disappeared. So, you’ll simply have to create another two widgets for your ‘Home Page Widgets’ area.

Your ‘Home Page Widgets’ will display three ‘Text’ widgets in total!

So, you can not only change the text in the paragraphs you can change everything!

Remember to change the image path to whatever image you want to place there.

I hope this helps 🙂

Ruairi

That’s great Montig

If you need help on anything else let me know 🙂

Hi Tusio

Go to your style.dev.css file: (you will have to delete your style.css and then rename your style.dev.css file to style.css to see the changes.)

The colours you need are all in the ‘Home Widgets’ section, which begins on line: 7358

Here are the colours you’ll need to change.

line: 7358 is the link colour.
color: #fff000;

line: 7366 is the text colour.
color: #fff;

line: 7391 is the widget title.
color: #fff !important;

Change there colours and save. Then Delete your style.css.

Rename style.dev.css to style.css to see your changes 🙂

Glad I helped 🙂

Hi Grapplerchurch

First you will need to delete your style.css file. Then rename your style.dev.css to style.css.

In your new style.css file go to line 3747
and change
background-color: #222222;
to whatever you want your menu’s background colour to be, you should also change the border colour on the line below.

Then go to line: 6515 to alter the Home Page Widgets

You’ll probably will want to change lines that begin on line: 6543

.home-widget {
  margin: 0 0 30px;
  text-align: center;
}

to something like:

.home-widget {
  font-family: your-font, helvetica, sans-serif;
  font-weight: bold;
  margin: 0 0 30px;
  text-align: left;
}

Hope this helps

Hi Shabeebrizvi 🙂

I will look into providing an option in the theme customizer to change the link color. It wouldn’t be as straight forward as the other color options, but it may be do-able!

The slider is not mine, I just recommend people to use it with this theme as it’s responsive and been a Bootstrap slider means people won’t have to load more css and js files.

Sliders often use ‘float-left’ so users can upload images to suit the sliders width!

Again, thank you for your feedback and I’ll see what I can do about the link colors.

All the best

Ruairi

If you need anymore info let me know 🙂

Hi Paul

The easiest way to deal with that Paul would be to create your own Front Page Temeplate:

http://wordpress.org/support/topic/adding-content-below-the-widget-on-the-front-page?replies=5

The best thing about creating your own front page template is that you have the same control over the CSS / html markup as you would with a static website.