Basic CSS

• 

  pithogsi10 · Member · Oct 11, 2016 at 11:57 am

  • Copy link
  • Add topic to favorites

  Hello. I am a newbie blogger.

  I want to add logo at the right (not left) of the site title. I already contacted the costumer care and she says I better ask it here because it is quite complicated. I found the tutorial about how to edit CSS at https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/ and I did it exactly the same. But there are different results as the different display and I cannot find the ‘matched CSS rules’ when I tried to do the inspect element in both Chrome and Safari.

  The result is as the picture below
  <img src=”http://i762.photobucket.com/albums/xx267/agashit/Screen%20Shot%202016-10-11%20at%206.40.27%20PM.jpg”>

  Instead of
  <img src=”http://i762.photobucket.com/albums/xx267/agashit/Screen%20Shot%202016-10-11%20at%206.40.49%20PM.jpg”>

  After I tried how to do it by my own and I have figured it out this just exactly as I want but I don’t know how to save it by CSS.

  Before
  <img src=”http://i762.photobucket.com/albums/xx267/agashit/Screen%20Shot%202016-10-11%20at%206.39.44%20PM.png”>

  After (Exactly just like I want but I don’t know how to save it)
  <img src=”http://i762.photobucket.com/albums/xx267/agashit/Screen%20Shot%202016-10-11%20at%206.39.33%20PM.png”>

  I would be glad if you help me as I already have paid the premium plan. Thank you.

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

• 

  innisfreehomestead · Member · Oct 11, 2016 at 2:24 pm

  • Copy link

  Hello there!

  Here’s a guide on how to edit your custom CSS https://en.support.wordpress.com/custom-design/editing-css

  Let me know if that wasn’t what you were looking for,
  Sage

• 

  pithogsi10 · Member · Oct 12, 2016 at 3:51 pm

  • Copy link

  Hi Sage!

  Actually it is not what I am looking for, but I would really appreciate that you have answered my question.

• 

  innisfreehomestead · Member · Oct 12, 2016 at 4:02 pm

  • Copy link

  Hello!

  You mention above that you have modified the CSS to get the exact look you would like, you’re just having problems saving it, correct? Or do you need help with writing the CSS itself?

  Thanks,
  Sage

• 

  pithogsi10 · Member · Oct 20, 2016 at 5:35 pm

  • Copy link

  Hello Sage!

  Yes, that is indeedly correct. I want to get the exact look as it is and I am having problems in saving it. Maybe do you know how to save it?

  Thank you,
  Agassi

• 

  innisfreehomestead · Member · Oct 20, 2016 at 5:42 pm

  • Copy link

  Hey there, Agassi!

  Are you copying the CSS into the Custom CSS area? If it isn’t saving from there, do you have an upgraded plan?

  Thanks,
  Sage

• 

  pithogsi10 · Member · Oct 21, 2016 at 3:19 pm

  • Copy link

  Hey, Sage!

  Yes, I have copied the CSS into the custom CSS area as I have the supported plan for CSS, premium plan.

  Here I specifically show you the steps how I attempt to do the change:
  1. https://cloudup.com/imSt8w4SZnt
  2. https://cloudup.com/iCYg_mgWXDC
  3. https://cloudup.com/ijnV-xo6lqM

  Do I miss something important? I am looking forward for the answer, thanks!

• 

  innisfreehomestead · Member · Oct 21, 2016 at 6:05 pm

  • Copy link

  Hello Agassi,

  Thanks for those screenshots! So what you’re actually doing is copying over HTML and placing that in your CSS editor which won’t work.

  Take all that out of your CSS editor and replace it with this code:

  .site-title a::after {
  	content: "";
  	height: 100px;
  	width: 100%;
  	display: block;
  	background-image: url(https://i0.wp.com/idijabar.or.id/wp-content/uploads/2015/12/LOGO-IDI.png);
  	background-size: auto 100%;
  	background-position: center;
  	background-repeat: no-repeat;
  }

  Where is says background-image: url() you need to change it to be the url of the actual logo you want to use there. You can also play with the height etc if it isn’t the right size for the logo.

  Let me know if that works,
  Sage

• 

  pithogsi10 · Member · Oct 23, 2016 at 1:17 pm

  • Copy link

  Hi, Sage!

  You are a great help! The code you give to me is working. Now I know the html and CSS are two different things.

  By the way, where do you get the code? Do you know where is the best source/site(s) about CSS codes? It’s in order to not depend by asking more questions here in this wordpress forum.

  Thank you,
  Agassi

• 

  pithogsi10 · Member · Oct 23, 2016 at 1:17 pm

  • Copy link

  Hi, Sage!

  You are a great help! The code you give to me is working. Now I know the html and CSS are two different things.

  By the way, where do you get the code? Do you know where is the best source/site(s) about CSS codes? It’s in order to not depend by asking more questions here in this wordpress forum.

  Thank you,
  Agassi

• 

  pithogsi10 · Member · Oct 23, 2016 at 1:18 pm

  • Copy link

  Hi, Sage!

  You are a great help! The code you give to me is working. Now I know the html and CSS are two different things.

  By the way, where do you get the code? Do you know where is the best source/site(s) about CSS codes? It’s in order to not depend by asking more questions here in this wordpress forum.

  Thank you,
  Agassi

• 

  innisfreehomestead · Member · Oct 24, 2016 at 5:43 pm

  • Copy link

  Hey there Agassi,

  Glad to hear it!

  I use the inspector tool (which you’ve used to get the HTML, down in the bottom left panel is the CSS) and then drop in different code to the areas I’m trying to edit to see how it looks before moving it to the custom CSS area. Here’s some CSS basics and there are a lot more resources online too if you just google something like “learning CSS) https://en.support.wordpress.com/custom-design/css-basics/

  Hope that helps,
  Sage