osDate Forum - osDate Dating Script

osDateEvo => osDateEvo Responsive Templates => Topic started by: zoeliakieaustausch on April 03, 2018, 08:45:35 PM

Title: Where to change the Text in the Header?
Post by: zoeliakieaustausch on April 03, 2018, 08:45:35 PM
Hello,
i installed a freh OsDate EVO.

But i do not find the file where i can change that the blue name of the Site is overlayd over the Picture?
Can i delete this?

Enclosed a screenshot of the Frontpage

Juergen
Title: Re: Where to change the Text in the Header?
Post by: Pharg on April 03, 2018, 10:51:05 PM
Hi zoeliakieaustausch,

You can change it and add a logo pic in the in the admin Site's Global Settings under Site Information you
will find this on the 3rd line:
Site Banner including logo to be displayed in the TOP. (e.g. images/logo.gif)  Add logo Here then save.
Adding a logo will save a lot of work.

Or if you want to resize the words you already have, you will need to change the logo width and font size in the both the desktop.css and the mobile.css

Find .logo and change the width to what you want, there are 2 one for logged out and one for logged in, change both.

For the desktop.css find this: ( Maybe make it 750px or even more since you have a big title. )
Code: [Select]
.logo {
height: 80px;
width: 550px;

background-size: 530px 90px;
position: relative;
margin-top: 40px;
margin-left:15px;
margin-bottom: 55px;
/*margin-left: 0.5%;*/

}
You might need to change the logo width for when logged in also here:
Code: [Select]
.logo_in {
height: 80px;
width: 550px;

background-size: 530px 90px;
position: relative;
margin-left:15px;
margin-bottom: 5px;
/*margin-left: 0.5%;*/

}

Then find .a.main_title and a.main_title_inside change the font size to something smaller that you like.
Code: [Select]
a.main_title{
font-size: 70px;
        font-weight: bold;
color: #3569c1;
text-decoration:none;
}
a:hover.main_title{
font-size: 70px;
        font-weight: bold;
color: #3569c1;
text-decoration:none;
}

Then also change the font size when logged in it might be to big also, it's 40px maybe 20px or 30px.
Code: [Select]
a.main_title_inside {
font-size: 40px;
color: #FFFFFF;
text-decoration:none;
}
a:hover.main_title_inside {
font-size: 40px;
color: #FFFFFF;
text-decoration:none;
}

For Mobile in the mobile.css do the same.
Find this .logo and .logo_in: Change the width from 300px to what you want maybe 550px
Code: [Select]
@media only screen and  (min-width : 200px) and (max-width :499px) {
.logo {
height: 65px;
width: 300px;
background-size: 200px 60px;
position: relative;
margin-left:5px;
/* margin-right:auto; */
margin-top: 7px;
}
}

@media only screen and (max-width : 780px) {
.logo_in {
height: 85px;
width: 300px;
background-size: 330px 70px;
position: relative;
margin-left:10px;
/* margin-right:auto; */
margin-top: 5px;
}
}

Now find this:  ( The font size is 50px and 35px change what your happy with, there are 4 font-size's to change here.
Code: [Select]
@media only screen and (max-width : 780px) {

a.main_title_inside {

font-size: 50px;

color: #3569c1;

text-decoration:none;

}

a:hover.main_title_inside {

font-size: 50px;

color: #3569c1;

text-decoration:none;

}

}

@media only screen and  (min-width : 200px) and (max-width :499px) {

a.main_title_inside{

font-size: 35px;

font-weight: bold;

color: #3569c1;

text-decoration:none;

}

a:hover.main_title_inside{
font-size: 35px;
font-weight: bold;
color: #3569c1;
text-decoration:none;
}
}