Motif Template, Various Modifications

tmbagency · Member · Jul 20, 2014 at 7:08 pm
Copy link

Add topic to favorites
Hello,

I’m using the Motif template and would like to do the following:

– Footer: Change the footer to 1 column, not three; and if possible just for the certain pages.
– Blog: The “Older Posts” link is red and would like it to reflect our corporate colours.
– Add a background image that blends with the logo.

Thank you,
Cecilia

The blog I need help with is: (visible only to logged in users)
lizthefair · Member · Jul 20, 2014 at 9:50 pm
Copy link
Here’s how you make the footer widgets into one column. Note, they are all still there so the second footer widget appears below the first one rather than next to it now.
```
.footer-widgets{
	width: 100%;
}
```
Here’s how to change the button. I went with the brown color you are using other places, but you can change out the hex value to something you like better:
```
#infinite-handle span{
	color: #623b2d

}#infinite-handle span:hover{
	background-color: #623b2d;
}
```
As for the background image, the easiest thing is to go to your dashboard and add one under appearance>background.

Hope that helps!
tmbagency · Member · Jul 20, 2014 at 10:30 pm
Copy link
Thanks Liz for your help. Much appreciated.

Wouldn’t this code make the footer one column throughout the website? I would like it only for the home page.

As for the background, when I do that, the logo at the top doesn’t blend in, it looks like two photos, one on top of the other. Should the logo be saved as a png? Or should I created a background image with the logo?

Thanks,
Cecilia
lizthefair · Member · Jul 20, 2014 at 10:48 pm
Copy link
I’ll keep looking for ways to make the footer different on the homepage–it’s a little tricky, but it should be possible.

As for the header interfering with the background image, I’d originally assumed you’d added the logo as a header image, but it looks now like you did it completely through CSS. You might try adding it using the dashboard and see if that makes it look ok with your background image. If not, incorporating the header into the background image could work–It depends a lot on the image and how well it scales etc.
lizthefair · Member · Jul 20, 2014 at 11:06 pm
Copy link
This should make the footer happier:
```
.home .footer-widgets {
	width: 100%;
}
```
Be sure to replace the earlier code I gave you rather than just adding this one or I don’t think it will work.
tmbagency · Member · Jul 21, 2014 at 3:19 am
Copy link
Hi Liz,

Awesome! Thanks for the code, will try it this week.

Not sure I understand, where do I upload the image in the dashboard? I still need go to Appearance, then Background?

Thank you,
Cecilia
lizthefair · Member · Jul 21, 2014 at 11:53 am
Copy link
Yes–Appearance>Background is where you go to upload your background image.

If you’d like to give your header a little more space, you can also do this to separate it from the background image:
```
.site-image{
     background-color: #ffffff;
}
```
If you want your header image to be clickable, you could also remove this code:
```
.site-image {
     background: url('http://themarketingb0utique.files.wordpress.com/2014/05/the-marketing-boutique-header-2014a.jpg') no-repeat scroll top left;
}
```
and then add your header to the site the usual way by going to appearance>header on your dashboard.

hope that helps!
aprilblevins · Member · Jul 21, 2014 at 1:03 pm
Copy link
1. How do I remove the gray horizontal lines around each side of the menu selections of “Blissful Blog” as I have it on blevinsandchu.wordpress.com? I like the vertical lines between each menu item, so I want to keep those.

2. Also, how do you remove the “Leave a Reply” area on all pages?

3. I’d like to be able to modify the size of the headers of and text within the pages. I like the size of the menu and header areas, but the header displaying at the top of each page seems huge.

Thank you!
April
tmbagency · Member · Jul 21, 2014 at 1:10 pm
Copy link
Hi Liz,

Okay, I will try it. Thanks again for you help, much appreciated!

Regards,
Cecilia
lizthefair · Member · Jul 21, 2014 at 1:11 pm
Copy link
Hi April,

It gets a little confusing to work on two separate blogs with two different people in the same thread, so if you could click the link below and copy/paste your question into a new thread in the CSS forum, I’ll be happy to help you over there.

https://en.forums.wordpress.com/forum/css-customization#postform
tmbagency · Member · Jul 21, 2014 at 1:59 pm
Copy link
Hi Liz,

Sorry but I have one more request. In the text widget, the links are grey. I would like this too to have the links represent the company colour.

Thank you,
Cecilia
thesacredpath · Member · Jul 21, 2014 at 9:01 pm
Copy link
Cecilia, to change the text color on text widgets only, add the following CSS and edit my (obnoxious green) color code as desired.
```
.widget_text {
    color: #22cc00;
}
```
tmbagency · Member · Jul 21, 2014 at 11:30 pm
Copy link
Hi,

Thank you!

Kind regards,
Cecilia
thesacredpath · Member · Jul 22, 2014 at 5:24 pm
Copy link
You are welcome.

No items found.