Adding image to page title / reducing space above footer

abigailedge · Member · Aug 18, 2013 at 4:26 pm
Copy link

Add topic to favorites
I’m new to CSS and just trying to work a couple of things out. Could anyone let me know if they are possible please?

I’m using the Standard theme and the site I’d like help with is abigailedge.co.uk

1) I’d like the tree image I currently have on the homepage to be square to the top right of the page, which would mean it overwriting the page title in some way.

2) I’d like to reduce the space between the bottom of the page and the footer area.

Any other tips for customizing the Standard theme would also be much appreciated.

Thanks in advance.

The blog I need help with is: (visible only to logged in users)
elisedesaulniers · Member · Aug 18, 2013 at 9:19 pm
Copy link
1) to add your tree image on the top of the page, that should be in your theme option/ custom header or something like that (not Css)

2)
#wrapper {
padding: 0 0 2px;
}
change 2 for whatever you want.
abigailedge · Member · Aug 19, 2013 at 10:03 am
Copy link
Thanks Elise, I’ve successfully amended the footer but perhaps I wasn’t clear about the image. I don’t want it in header – I want it on the page titled “Good with words” so that it sits directly opposite the title in the top right corner.

At the moment the image sits below the title, which creates extra white space at the bottom of the page that I don’t want.
elisedesaulniers · Member · Aug 19, 2013 at 10:17 am
Copy link
That wouldn’t be possible.
But you could simply not use the title in this post and type your title in the content (make it big with header 1 format), with the image next to it.
abigailedge · Member · Aug 19, 2013 at 10:24 am
Copy link
That’s done it, thanks! Is there any way to remove the page title from a particular page using CSS?

I’ve just deleted the title from the page content, meaning the page still displays a line underneath where the title would normally be.
elisedesaulniers · Member · Aug 19, 2013 at 11:22 pm
Copy link
Yes.What page ? I’ll give you the complete code.
abigailedge · Member · Aug 20, 2013 at 9:54 am
Copy link
Thanks Elise. It’s actually the page that’s on my homepage titled “Good with words”.
elisedesaulniers · Member · Aug 20, 2013 at 10:24 am
Copy link
try

#post-1934 .post-title{
display:none
}

Does it work ?
abigailedge · Member · Aug 20, 2013 at 10:29 am
Copy link
I’m afraid not – it doesn’t seem to alter anything as far as I can tell.
elisedesaulniers · Member · Aug 20, 2013 at 12:23 pm
Copy link
If you do
.post-title{
display:none
}

Alone, all your post titles from your site should disappear. If this work, try again with the line i’ve written earlier.
thesacredpath · Member · Aug 21, 2013 at 1:31 am
Copy link
@abigailedge, The tree image in the footer sidebar is smaller than the open width to the right of the post title, “Good with words.” My suggestion would be to make the image a background image in the post aligned top right. Here is a screenshot of what I believe you want.

And here is the code I used to achieve that.
```
.home .post {
    background: url("http://abigailedge.files.wordpress.com/2013/08/abigail-edge-contact.jpg") no-repeat scroll right top / contain #FFFFFF;
}
.home .entry-content {
    width: 62%;
}
```
The above is limited to only the home page and will not show up on any other page or post on your site.
abigailedge · Member · Sep 1, 2013 at 10:56 am
Copy link
@thesacredpath This is exactly what I was looking to do, thank you!

The only thing that bothers me is that the line between the page title and bodytext is visible over the image – is there any way to remove the line from this page only?
thesacredpath · Member · Sep 2, 2013 at 6:25 pm
Copy link
Ah yes, we can take care of that. Add this to your CSS.
```
.home .post-header {
    width: 62%;
}
```
Or alternately you can revise the .home .entry-content rule we used to look like this:
```
.home .entry-content, .home .post-header {
    width: 62%;
}
```
Either way will work.
abigailedge · Member · Sep 6, 2013 at 7:14 am
Copy link
That’s fab, thank you!

Just one last question – my site is responsive and when the screen is viewed on a tablet the text overlaps the image and becomes difficult to read (if you shrink the browser window you’ll see what I mean).

Basically everything on the site scales down – except the image of the tree I just added. Is there any way to make this adjust responsively too please?
thesacredpath · Member · Sep 6, 2013 at 2:42 pm
Copy link
Replace the like code you have now with the ones below which sets a percentage width for the image instead of using the “contain” attribute and see what you think. You end up with some white space below the image once the responsive changes kick in at 980px in width, but it there is no text overlap happening.
```
.home .post {
    background: url("http://abigailedge.files.wordpress.com/2013/08/abigail-edge-contact.jpg") no-repeat scroll right top #FFFFFF;
    background-size: 38%;
}

.home .entry-content, .home .post-header {
    width: 55%;
}
```

No items found.