Blog, Navigation Menu, and Footer do not seem to be responding to overrided CSS code

  • 1
  • Problem
  • Updated 7 years ago
  • In Progress
Hi,

I'm slowly learning as I go, since my HTML skills are from when I was in high school, 12-13 years ago.
I seem to have figured out how to modify my site's CSS code to change fonts and such on my page. I've also figured out how to have a custom header and footer. My header is responding to CSS changes, but as my question says, the following items don't respond to CSS changes:
1) Blog items
2) Text in my custom footer
3) Navigation menu items

My site is at http://www.promotionalproductstore.ca

We're using the Get Your Business Online Canada service, upgraded to Yola Silver, the Yola site is an add-on to our existing website at http://www.adcommpromotions.com, we are very restricted on the changes we can make there, and have to pay for every little change we want to make, which is why we're adding on with Yola.

I'd like to use Trebuchet MS on the menu and blog instead of the Arial that is pre-set. I also want to change the font used for links from Times New Roman to Trebuchet MS also.

For the footer I took the footer code from my existing site and made some modifications, and copied the style from my existing site's CSS into the overrided Yola CSS, but that didn't help.
the code is:
.style28 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF9900;

Any help would be greatly appreciated.

Thanks,
Daniel
Photo of Daniel

Daniel

  • 19 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Darryl,

It appears that you have added a custom navigation code. So, you will need to make the tweak to your navigation font through your navigation code. I am not sure where you have added this code? Is it in your Site CSS or in your Site Tracking Header section?

For your blog, you'll need to view the page source and be sure to click on the Blog CSS links. I've attached a screenshot. There, you can find the CSS codes to tweak your blog page and add them to your Site CSS.



I also noticed that you have added everything to your Site CSS. I recommend that you only add the codes you need.

Please let me know if you have any further trouble with this.
Photo of Daniel

Daniel

  • 19 Posts
  • 0 Reply Likes
Hi Sanja,
It's Daniel, not Darryl, but thats ok (I usually get people calling me David, never been called Darryl before).
I'm not sure what you mean by custom navigation code. I have the Yola navigation links on the side (I just changed the theme on the published site to Clean Slate). My custom header has links to existing pages at http://www.adcommpromotions.com. I want to change the font of the regular Yola page links on the left side of my page.

I'll try the changes you suggest for the blog.

As for adding everything, I found the only way to get the page to respond to changes properly was the delete everything on the editable CSS text on the left side and then copy and past everything from the site CSS tab on the right side, otherwise it didn't respond properly, or it broke my site layout (the main content would be shifted down about 10-15cm on my screen. So I found the best results by deleting what was there and pasting in the code from the Site CSS tab, and editing that. Did I miss something I shouldn't have before that? I couldn't find anything to tell me "this code snippet controls this" and such, so I played around with a few options, and broke my site, so I did it the way I described.

Also, how do I make my newsletter sign up form narrower so my text box is wider? Also can I change the font here also?

I keep thinking of new questions. I have code for mouse overs on my custom header and footer that doesn't work because on my existing website, it's in the body tag, where could I put this code instead?

The body tag looks like this:

Ofcourse I'd have to change the image links to absolute rather than relative, but that's trivial.

Thank you again for all the help, it's much appreciated.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Daniel (See I got it right :P),

It would be really helpful if you could publish your site to a free domain so that we could see the site and the changes you would like to make. I find it really helpful to see the Source Code and all of the CSS myself and to be able to edit using the Google Chrome developer tools to see what changes work.

And if you post code here on the forum, start if with <!--- and end it with --->. This stops the forum from actioning the code.

As for the custom Navigation, if you would like to incorporate this navigation into the navigation of the template, you would need to edit some of the template CSS. It is possible but can require some persuasion!

If you could publish to a free .yolasite domain then we can see the CSS in action and make the changes and show you how to do it.

I look forward to hearing from you.

Andi
Photo of Daniel

Daniel

  • 19 Posts
  • 0 Reply Likes
Hi Andi,
Lol Thanks!

I'm not sure what the difference between a free Yola site and my GYBO Canada site with the free domain is, other than the URL (I have upgraded to Silver, but that shouldn't be an issue). http://www.promotionalproductstore.ca is my Yola site, so there should be no need to publish to a free domain. The source code, just like any other HTML site should be open source. So I have no idea how to publish my site to a free Yola site when it's already on a Yola site with our domain.

What are the Google Developer Tools? I'm not familiar with Chrome, since I'm a loyal Mozilla user (been using Netscape or a Mozilla product since Netscape 3). When I actually do some coding, if I'm not in an IDE, I use TextPad. Are there any FF equivalents that may be of use to me?

I didn't realize these text boxes recognized HTML, the thought never occurred to me I'd have to comment the code since this should, or so I thought, be a plain text box.

Anyways the code I tried to post before is:
/*

*/

And it looks like theres some JavaScript to go with that code

/*

*/

How would I implement this, since I can't edit the body tag.

I still don't know what you or Sanja are talking about with custom navigation code, sorry.

I think I've answered your questions as best as I could, I seemed to lose you a little there, so I am not sure if I understood everything.

Thanks,
Daniel
Photo of Daniel

Daniel

  • 19 Posts
  • 0 Reply Likes
hmm, the code didn't seem to get posted right, even with comment tags

lets try this again

body tag:
<!---
<body onLoad="MM_preloadImages('images/homelink_over.jpg','images/promotional_over.jpg','images/mslink_new_over.jpg','images/pslink_new_over.jpg','images/services-over.jpg','images/contactuslink_new_over2.jpg','images/facebook-link-over.jpg')">
--->

JavaScript code that goes with the code in the body tag:

<!---
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

--->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
My apologies, Daniel! I have no clue where Darryl came out of! I blame my old brain :)

Now, I'm wondering if perhaps I have been looking at the wrong site? Please do follow up with Andi's suggestion.

Hopefully with all of us putting our collective heads together, we'll get this figured out!
Photo of Daniel

Daniel

  • 19 Posts
  • 0 Reply Likes
Hi Sanja,
Thats ok :)

The Yola site is http://www.promotionalproductstore.ca
I have a Get Your Business Online Canada account upgraded to Yola Silver, the .CA domain was included free.

I've our main website http://www.adcommpromotions.com, so that the user won't notice much, if any difference when they go back and forth between pages.

Basically I'd like to be able to modify any and all fonts anyway I like.

Thanks for the help!
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Daniel,
Sanja is not currently online but I will forward this to her and she will be able to get back to you when she comes back online.

Emmy
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Try this css:

/*Navigation*/
.sys_navigation li a
{
font-family: "Trebuchet MS", sans-serif !important;
}
/*Blog*/
#Right_I63
{
font-family: "Trebuchet MS", sans-serif !important;
}
/*footer*/
.style28 {
font-family: "Trebuchet MS", sans-serif !important;
font-size: 10px !important;
font-weight: bold !important;
color: #FF9900 !important;
}
Photo of Daniel

Daniel

  • 19 Posts
  • 0 Reply Likes
Thanks Kevin,
Where do I put that? Anywhere in my CSS file?
Whats the sans-serif and !important for? isn't sans-serif just a generic font type?

Thanks,
Daniel
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
If you are using !important after the CSS value then it will override the settings but also indicates that if the user does not have the Trebuchet MS font you have designated to display installed, it needs to be displayed with another member of the sans-serif font family.
At least that's my understanding of that value....but I've been known to be wrong LOL ;)
Peach :o)~
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Daniel,

Has Kevin's suggestion helped? Please let us know if you still need further assistance.
Photo of Daniel

Daniel

  • 19 Posts
  • 0 Reply Likes
Hi Sanja,
Kevin's suggestions don't seem to have helped at all.
I found the blog css files in my html, but I am not sure how to override these.

@Eat_A-Peach_5, thanks for the explanation.

Thanks,
Daniel
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Daniel,

Here's an example of what you can put in your SIte CSS for your blog edits:

div.sys_blog div.post h2 a {
font-size: 50px;
font-family: Times New Roman;
color: #5dc4d3;
}

Please give this a try and see if this works for you.