[AnimatedPageTransition] Font and colors

[AnimatedPageTransition] Font and colors

  
Forge Component
(1)
Published on 2015-07-31 by Viegas
1 vote
Published on 2015-07-31 by Viegas
Hi Viegas,

How can you change the font and the page color?

Thanks!

s
Hi,

Click on a page and see it attributes below. There is one called Style Sheet, double click on it and you can see the CSS for that page. Inside that CSS there is this property where you can change the font and the background-color:
body {
  font-size: 1.6rem;
  font-family: "PT Sans", sans-serif;
  color: #83b0b9;
  background-color: #343943;
}

The CSS is being set individually for every page and that's a bad solution it should be put only on the Style Sheet attribute of the theme itself (AnimatedPage theme)
Hi Viegas,

I went through the CSS and i noticed this for the loading bar.


#cd-loading-bar.Page1{
  background-color: #d35657;
}
#cd-loading-bar.Page2 {
  background-color: #343943;
}
#cd-loading-bar.Page3 {
  background-color: #e4b162;
}
Then i thought maybe there is something similar for the page color, and here we go....

#cd-loading-bar.Page1 {
  background-color: #d35657;
}
#cd-loading-bar.Page2 {
  background-color: #343943;
}
#cd-loading-bar.Page3 {
  background-color: #e4b162;

The body color that you suggested me it wasen't the one that i was looking for,

Many thanks for the help, and speak you soon.

S
Hi Viegas,

Could you please tell me how can i change the size of the test?

I would like to change the color of the link also.

.cd-title h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}
link {
    color: #FFFFFF;
}


the body is changing only the bottom part but not the top one...

body {
  font-size: 1.6rem;
  font-family: "PT Sans", sans-serif;
  color: #83b0b9;
  background-color: #343943;
}

Any suggestion?


Thanks

s




Hi,

Instead of giving you the answer let me drop you some notes and tips.

Are you familiar with the inspect element feature in the most common browsers? That is the best way to "play" with CSS because you can inspect an element, change its properties and see them in action right way. When you are done with customizing that css you can just copy and paste it to your stylesheet.

I always fine tune the css with the inspect element feature and then copy the properties to Service Studio.
Hi Viegas,

Thanks for the suggestion, and yes i know it i'm playing with Firebug but still i'm not able to find how to change the h2 size.

I think that it should be with .cd_title but nothing happen.

Thanks
Hi,

Well by changing this:
@media only screen and (min-width: 768px)
.cd-title h2 {
  1. font-size9rem;
Thanks Viegas,

Really appreciated.

s