Customising with the Resonar theme

• 

  harukamagazine · Member · Jun 22, 2015 at 7:00 pm

  • Copy link
  • Add topic to favorites

  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)

• 

  kathrynwp · Staff · Jun 23, 2015 at 3:09 pm

  • Copy link

  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:

  An Intro to CSS: Finding CSS Selectors

  An Intro to CSS, or How to Make Things Look Like You Like

  Intro to CSS: Previewing Changes with the Matched Rule Pane

  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  https://thewc.co/articles/view/web-inspector-tutorial

• 

  kathrynwp · Staff · Jun 23, 2015 at 3:13 pm

  • Copy link

  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??

• 

  kathrynwp · Staff · Jun 23, 2015 at 3:14 pm

  • Copy link

  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?

• 

  kathrynwp · Staff · Jun 23, 2015 at 3:21 pm

  • Copy link

  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/