CSS Customization Help for Adventure blog theme

• 

  tbelk · Member · May 4, 2014 at 2:50 am

  • Copy link
  • Add topic to favorites

  Hi

  I need help in changing the overall width and length of my blog to 640 x 426 (so that my header images will fit and not look blurry).

  Any help would be appreciated. TIA!

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

• 

  thesacredpath · Member · May 5, 2014 at 4:35 am

  • Copy link

  Hi there, as long as your header is at least 2560 pixels wide by 800 pixels tall, they should look clear and crisp with Adventure no matter what the browser window or screen width is. The header image you are using right now, the water fall, is clear and crisp and resizes nicely.

• 

  tbelk · Member · May 6, 2014 at 8:28 pm

  • Copy link

  The waterfall image is the default header image for the Adventure theme. All of the images that I have saved on my computer are 640 x 426.

  I know that the header image is fixed in this particular theme. However, I wanted to know is there a CSS code that will change the width of the body?

• 

  thesacredpath · Member · May 8, 2014 at 2:10 am

  • Copy link

  Hi, use this to see what your site would look like with everything at 640px in width and the header image area at 640 x 426.

  #wrap {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
   }
  .feature-img {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      height: 426px;
  }

  This example would be what your site will look like with a 640px x 426px header image but with the site at the original width.

  .feature-img {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      height: 426px;
  }

• 

  candilejasblog · Member · May 9, 2014 at 1:26 pm

  • Copy link

  Hi, I’m new with blogging, WordPress and obviously, CSS. I’m trying to customize the theme with some basic changes, and I also have the Adventure theme, I found your answer very helpful.

• 

  thesacredpath · Member · May 9, 2014 at 5:58 pm

  • Copy link

  @candilejasblog, glad it helped. Let us know if you have further questions or problems.

• 

  candilejasblog · Member · May 12, 2014 at 10:52 am

  • Copy link

  Hi again, I’m still trying color schemes and other minor changes to the Adventure theme, but I haven´t found how to change the text “follow me” in social bar of the front page; since my blog is in Spanish, I’d like to change the text to “Sigueme”. Other changes I’d managed to do with the Firefox developer tool, looking for the properties and then I’d made changes in the CSS editor of WordPress, but I haven´t any luck with that text. Any advice? If you need access to the blog, let me know.

• 

  thesacredpath · Member · May 12, 2014 at 7:16 pm

  • Copy link

  Howdy, add the following to change the follow me text.

  .home-social .title {
      visibility: hidden;
  }
  .home-social .title:before {
      visibility: visible;
      content: "Sigueme";
  }

• 

  candilejasblog · Member · May 12, 2014 at 10:12 pm

  • Copy link

  Hi, thanks, it worked, and nicely solved btw: hide the text and add a new one. Regards.

• 

  thesacredpath · Member · May 13, 2014 at 3:48 pm

  • Copy link

  You are welcome.

• 

  candilejasblog · Member · May 20, 2014 at 2:56 am

  • Copy link

  Hi again, this time I would like to add a copyright line to the theme’s footer. I found that the code below works, but the line appears twice: first after the blog name “Candilejas” and the second after the text “Blog de WordPress.com. · El tema Adventure.” Obviously, I only need to have the copyright line once, preferably after the blog name and not after the “Blog de WordPress…” Any advice? Regards.

  footer p:after {
            content:"  copyright line ";
  }

• 

  thesacredpath · Member · May 20, 2014 at 3:32 am

  • Copy link

  Hi, since the blog name and the WordPress and theme credits are both in paragraphs, we need to tell the browsers which paragraph we want the new content after. In this case, it would be the first paragraph within .footer and tell the browser to put the extra content after the first “p” element.

  .footer p:nth-child(1):after {
      content: " My Copyright Here";
  }

• 

  candilejasblog · Member · May 20, 2014 at 11:22 am

  • Copy link

  Thank you for the quick replay and for explaining how it works. Regards.

• 

  thesacredpath · Member · May 20, 2014 at 4:17 pm

  • Copy link

  You are welcome.