Couple of questions

Intro
#1

Hello AThemes,

First of all many thanks for all your efforts and great works! After building a website with your 1 of the best themes in the market, Moesia Pro, I chose your Intro theme for another website. It’s a great theme with nice features. After activation and customization I need your assistance for couple of deeper Theme changes. Here are my questions:

  • When I choose to not to use my first page header and text on all other pages of the website, the footer of those pages with less text or contents, stands in the middle of screen. How can I push the footer down to the bottom of screen without adding any more contents to those pages?
  • The typing animation of the text over the header image repeats infinitely. How could it be stopped after just one or two repeats?
  • When I set a PNG file with transparent background as featured image for a post/page, the background of the image turns into black. How can I change that black color into my page/post background color?
  • On the slide in side menu, which is awesome, all items have the same X orientation/padding. How can I create indents for subcategories/subpages?
  • Is there any way to use the first page header for all other pages without the text and button that needs to be shown just on the the first page?

Thanks in advance for your time and assistance!

Regards,

#2

Hi, we are glad to hear that you like and use our themes.

1) If you are using page builder and one row you can set top and bottom padding for these pages. Just edit row and set Top/Bottom pading to desired value http://screencast.com/t/2gdU21RM

Other option would be to set custom css for those pages or to set top margin on footer but you have to send us your page link. For example like this:

footer#footer {
    margin-top: 300px;
}

There are several possibilities but you have to send us your page link.

2) Typing animation is controlled by theme folder / js / typed.js at the end of this file you will find available options. When you check options you have to edit file theme folder / js / scripts.js (last long line) and set your values. For example if you change http://screencast.com/t/tDy8bHhlx40 this.loopCount=this.options.loopCount to this.loopCount=2 animation will loop 2 times and stop.

3) 4) and 5) Unfortunately for all this we have to see your page so we can prepare custom css code. Also you have to tell us what you want to achieve.

Best Regards

#3

Dear dimikjones,

Thanks for your response and appreciate your support! Here’s the address:
Gruene Passage

Resectfully,

#4

Hi,

To apply custom css code you can use simple custom css plugin. After you apply css code please be sure to clear browser cache.

1) Since header image is used on all pages I presume that you will not push footer more below.

2) Typing animation is explained and you have to change that as desired.

3) Custom css code below will remove background for entry image, you can also set different value as hexadecimal http://www.w3schools.com/tags/ref_colorpicker.asp:

/*featured image background color*/
.hentry .entry-image {
  background: transparent;
}

4) Menu, apply custom css code below it should look like this http://screencast.com/t/6oNJARhHY:

/*menu styling start*/
#sidebar {
    padding: 30px;
}

.sidebar-nav ul li a {
    line-height: 25px;
}

nav.sidebar-nav ul {
    list-style: none;
}

ul#menu-1st ul {
    margin-bottom: 35px;
}

ul#menu-1st > li {
    margin-bottom: 10px;
}

ul#menu-1st ul.sub-menu {
    margin-left: 20px;
}
/*menu styling end*/

5) Custom css code below will hide header content on all pages except home page:

/*hide header content on all pages except home*/
body#top:not(.home) .header-container {
    display: none;
}
#5

Dear dimikjones,

You are amazing. Million thanks for your support! As a matter of fact I used header image on top of all pages to keep the footer in the bottom of screen.

Best regards,

#6

Hi, you’re welcome,

Please remove header from other pages and let me know and I will prepare custom css code.

Best Regards

#7

Dear dimikjones,

Header removal done! & appreciate your help again & again & again and ∞

#8

Dear dimikjones,

May I ask for 1 more favor? How can I have my posts/pages in full width (as wide as header image)?

Sincerely,

#9

Hi,

You choose which custom css code will be applied :slight_smile:

For adding footer top margin to all pages except home page:

body#top:not(.home) #footer {
  margin-top: 200px;
}

For adding footer top margin to all pages including home page:

body#top #footer {
  margin-top: 200px;
}

For adding top pading and bottom margin to all site main content:

section#content {
    padding-top: 100px;
    margin-bottom: 200px;
}

Also you can adjust values as you like.

Best Regards

#10

Hi,

This custom css should do the trick:

.site-content > .row {
    max-width: 82em;
}

Also you can increase or decrease value to your liking. Default is 62.5em.

Best Regards

#11

Dear dimikjones,

You are wonderful. :wink: All changes are done. After all is it me or the first two code blocks are really the same? Thanks a lot for all you’ve done for me today.

Sincerely,

#12

Thanks for noticing I changed that :slight_smile: . Above is answer to your last question.

#13

Dear dimikjones,

And here’s the last but not the least thanks:
THANK YOU!

#14

(sorry I’m kinda new and trying to learn quickly)
the posts for this “Couple of questions” are great.
Does this custom css code go in the style.css file?

#15

@annahausen

Hi,

Yes, you can place the css code above inside style.css file or create child theme and place it inside child theme style.css file, in this way changes will be permanent after theme updates.

Also you can apply the code through plugin mentioned above - simple custom css.

Best Regards