Custom CSS – Sella Theme

• 

  ashrouten · Member · Feb 17, 2017 at 5:15 pm

  • Copy link
  • Add topic to favorites

  Hello!

  I’d like to make a few small adjustments to my site:

  – Move the social media menu to the top right hand side of the static front page
  – Insert custom copyright text into the footer
  – Make the text box that sits over the top of the featured image on the front page smaller.
  – Reduce the gap between the front page widgets section and the front page testimonials section.

  I have a premium account, which will allow me to use custom CSS.

  I am not sure however how to write/input CSS code, so wondering if an expert can help write the code and advise on input.

  Thank you!

  The site I need help with is ashrouten.com

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 17, 2017 at 10:55 pm

  • Copy link

  Hi there,

  – Move the social media menu to the top right hand side of the static front page

  Give the following a try. I’ve included a Media Query to change the alignment of the icons to center at 767px width and less when the touch device menu activates since it looks a bit funny to have everything in the header area center aligned except for the social icons.

  .home .social-links {
  	position: absolute;
  	top: 15px;
  	right: 0;
  	width: 100%;
  	text-align: right;
  	padding-right: 40px
  }
  .home #page {
  	position: relative;
  }
  @media screen and (max-width: 767px) {
  	.home .social-links {
  		text-align: center;
  		padding-right: 0;
  	}
  }

  – Insert custom copyright text into the footer

  Add the following and edit the content string between the parentheses as desired.

  .site-info:before {
  	content: "My Copyright";
  	display: block;
  	margin-bottom: 10px;
  }

  – Make the text box that sits over the top of the featured image on the front page smaller.

  I think this is about the best we can do on that and keep a bit of whitespace around the text for easier reading.

  .home .hero .entry-header, .home .hero .entry-meta {
  	display: none;
  }
  .home .hero .hentry {
  	padding: 15px;
  }
  .home .hero .entry-content {
  	margin-bottom: 0;
  }

  – Reduce the gap between the front page widgets section and the front page testimonials section.

  See what you think with this.

  .home #secondary {
  	padding-bottom: 0;
  }

• 

  ashrouten · Member · Feb 18, 2017 at 9:47 am

  • Copy link

  Hi theSacredpath,

  Thank you for taking the time to look at these so comprehensively. I’ve applied all of this code and they work perfectly. It’s very much appreciated.

  Now I realise what is possible, there are a few other tweaks I would like to make such as changing opacity of the featured image text box, changing default font size and remove uppercase (I managed to do that for the header by myself but not the rest), centering the blog posts, removing the padding around the footer widgets etc.

  In terms of etiquette is it best for me to start a new forum post for these?

• 

  lrproductionsca · Member · Feb 19, 2017 at 11:32 pm

  • Copy link

  Is there a way to make that CSS for the social icons for all pages? It worked perfectly on my home but won’t stay on any other page.

• 

  thesacredpath · Member · Feb 20, 2017 at 7:07 pm

  • Copy link

  Certainly. Remove the .home (and the trailing space) from each of the three CSS selectors so it looks like this.

  .social-links {
  	position: absolute;
  	top: 15px;
  	right: 0;
  	width: 100%;
  	text-align: right;
  	padding-right: 40px
  }
   #page {
  	position: relative;
  }
  @media screen and (max-width: 767px) {
  	.social-links {
  		text-align: center;
  		padding-right: 0;
  	}
  }