Customising with the Resonar theme
-
I have no CSS experience but would like to change the following using the Resonar theme:
1. Change the font/size/positioning of the text overlaid on the ‘featured photograph’
2. Add a second lot of text on the same featured photograph, e.g. a title or particularly a logo?
3. I like the functionality of picking out a quote and have worked out how to do this but would like to reposition it outside the margin- how can I do this?
4. This is basically a follow-up to 3. but is it possible to put the highlighted quote in a box?Thanks for your help!
The blog I need help with is: (visible only to logged in users)
-
1. Change the font/size/positioning of the text overlaid on the ‘featured photograph’
You can change your heading or body font and size in the Customizer’s fonts section.
For positioning, in what way do you want to move it? You can use margin to accomplish that:
http://www.htmldog.com/guides/css/beginner/margins/
For example, to move up the titles by 30 pixels on single posts, you would use something like this:
.single .entry-title { margin-bottom: 30px; }Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
-
2. Add a second lot of text on the same featured photograph, e.g. a title or particularly a logo?
That isn’t generally possible, though you might be able to fake something with CSS using :after or :before. Do you have a mockup of the effect you’re trying to achiee??
-
3. I like the functionality of picking out a quote and have worked out how to do this but would like to reposition it outside the margin- how can I do this?
Using negative-margin might work. Do you have a page with your quote that I could see?
-
4. This is basically a follow-up to 3. but is it possible to put the highlighted quote in a box?
Sure, this is some rough CSS for a solid box:
blockquote { background-color: #b9ddf2; }http://www.htmldog.com/guides/css/beginner/colors/
You can change the example colour to any colour code you like: http://www.0to255.com/
- The topic ‘Customising with the Resonar theme’ is closed to new replies.