Changing font for Embedded code

mgedit · ‎03-17-2021

Created a bullet list using "embed code". How do I change font and size to match text on rest of page? Right now it looks like Times Roman and rest of text is in Lato

whitemonkey · ‎03-17-2021

@mgedit

for example:

text-align: left;

font-size: 18px;

font-family: 'Actor';

color: #ff6600;

adjust to suit

embedded code slows down page loading speed!!!!

mgedit · ‎03-17-2021

Thanks ... still not working for me. Here is what I have. What's wrong? I can change to Arial and font chages, but not to Lato, which is body text font. Colour also stays as grey. Jusst trying to have a bullet list with internal links on the page. Cheers, Mike

<ul style=font-size:18px;font-family:'Lato';color: #00000">
<li><a href="#bio">Biology and Ecology</a></li>
<li><a href="#biotech">Biotechnology</a></li>
<li><a href="#cad">Canadian Studies</a></li>
<li><a href="#corp">Corporate and Strategic</a></li>
<li><a href="#environ">Environment</a></li>
<li><a href="#eval">Evaluation</a></li>
<li><a href="#fish">Fisheries</a></li>
<li><a href="#gender">Gender</a></li>
<li><a href="#health">Health</a></li>
<li><a href="#hydro">Hydrology</a></li>
<li><a href="#ict">Information and Communication Technology</a></li>
<li><a href="#dev">International Development</a></li>
<li><a href="#manual">Manuals (User and Training)</a></li>
<li><a href="#manu">Municipal Services</a></li>
<li><a href="#recycle">Recycling</a></li>
</ul>

whitemonkey · ‎03-17-2021

@mgedit

from what u sent font colours are 6 characters (u have only 5) #000000 is BLACK

is Lato a sans serif?

font-family: 'lato', sans-serif;

whitemonkey · ‎03-17-2021

@mgedit

try lato with a l not L ????

mgedit · ‎03-17-2021

Thanks again. Will give those changes a try. Cheers, Mike

whitemonkey · ‎03-17-2021

@mgedit

welcome!!!

my travel blog is https://www.nomadicbackpacker.com lovingly built with Weebly and quite a few modifications Id appreciate a few hits )

mgedit · ‎03-17-2021

Looks like font has changed with the addition of "sans serif", but still grey colour.

Here is what I have now:

Any more suggestions?

Cheers, Mike

whitemonkey · ‎03-17-2021

@mgedit last chance at the OK Coral

missing the ; ????? after the 000000 as:

mgedit · ‎03-17-2021

That could be it. Thanks. Will try again tomorrow. Cheers, Mike

PaulMathews · ‎03-18-2021

@mgedit Be careful with your opening and closing double-quotes with the style attribute within tags. Here's what you have in the style attribute of your ul tag:

<ul style=font-size:18px;font-family:'lato',sans-serif;color:#000000>

Here's what it should be (missing items highlighted).

<ul style="font-size:18px;font-family:'lato',sans-serif;color:#000000;">

Notwithstanding this, your site's css should automatically allow lists to inherit the body text styling. Inline styling like that above is not desirable (if you decide to at some point change your site's body text font, you'd have to go through your whole site and modify the inline styling of each of your unordered lists). I'd suggest that you take a look at your site's css code (in the Site Editor, click Theme then click the Edit HTML/CSS button) and see what exactly was coded for the ul element style.

mgedit · ‎03-18-2021

Thanks for the additional input. Used coding that you suggested and still text is grey.

I have not worked with html coding for 30 years and even that was minimal! Tried looking for the "ul element coding" as suggested, but not sure what I'm looking for. Found this, which seems to be closest?

I am just constructing the site, and have not published yet ... is it possible that the published site will look different than what I'm seeing in the editor?

/* Nav */
.nav {
text-align: center;
}
.nav ul {
display: inline-block;
vertical-align: top;
list-style-type: none;
}
.nav ul li {
position: relative;
display: inline-block;
padding: 0 5px;
}
.nav ul li a {
display: block;
padding: 5px 15px;
color: #b9b9b9;
text-transform: uppercase;
letter-spacing: .07em;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 19px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}
.nav ul li#active > a.wsite-menu-item,
.nav ul li > a.wsite-menu-item:hover {
color: #333333;

PaulMathews · ‎03-18-2021

@mgedit The css you showed is the navigation menu list item so that's not really going to have any effect on a standalone unordered list within a page.

If your unordered list is in fact a list of straight text items (and not hyperlinks), move the color attribute spec one level down from the ul tag to the list item (li) tag:

<ul style="blah blah">
<li style="color:#000000;">First list item</li>
<li style="color:#000000;">Second list item</li>
.
.
.
</ul>

Again, this is best done directly in the site css so that you don't have to add the inline styling manually to every li tag.

mgedit · ‎03-18-2021

Thanks once again, but still having no luck.

Here is what I tried:

<li style="color:#000000;"><li><a href="#bio">Biology and Ecology</a></li>
<li style="color:#000000;"><li><a href="#biotech">Biotechnology</a></li>
<li style="color:#000000;"><li><a href="#cad">Canadian Studies</a></li>
<li style="color:#000000;"><li><a href="#corp">Corporate and Strategic</a></li>
<li><a href="#environ">Environment</a></li>
<li><a href="#eval">Evaluation</a></li>
<li><a href="#fish">Fisheries</a></li>
<li><a href="#gender">Gender</a></li>
<li><a href="#health">Health</a></li>
<li><a href="#hydro">Hydrology</a></li>
<li><a href="#ict">Information and Communication Technology</a></li>
<li><a href="#dev">International Development</a></li>
<li><a href="#manual">Manuals (User and Training)</a></li>
<li><a href="#manu">Municipal Services</a></li>
<li><a href="#recycle">Recycling</a></li>
</ul>

Here is what I end up with (see below). Clearly still doing something wrong, but I can't see what. If I knew how to fix at style level I'd be happy to do that, but I can't find where that is within the Edit HTML/CSS. Sorry for the continued questions, but did not think this would be that difficult to sort out.

whitemonkey · ‎03-19-2021

@mgedit here is my original embedded code i used with partial success..

<h3 style="text-align:left;font-size: 20px ; letter-spacing: 1.2px; font-weight:300; font-style: normal; margin: 0 auto 0.8em; font-family: 'Oswald'; line-height:33px; color:#727272; ">ADD TEXT HERE

<a href= "https://www.nomadicbackpacker.com"target="_self">&#8226 ADD THE TEXT THAT YOU WANNA LINK</a>
 
AND

<a href="https://www.nomadicbackpacker.com"target="_self">&#8226 ADD THE TEXT THAT YOU WANNA LINK</a>

</a>

paste it in an emdded code element. the &#8226 denotes a bullet point denotes a line space

have used my blog site as reference to show u where i put the destination of the link

i built a whole site using this code.. IT was VERY slow to load but works perfectly youll get the drift

can substitute the h3 with h1 or what ever and even p

PaulMathews · ‎03-19-2021

@whitemonkey You should not use the font tag to apply any type of font styling as this tag is deprecated after HTML4. While most browsers will continue to provide legacy support for old tags like this, you shouldn't be coding anything that doesn't meet the HTML5 spec. Instead, use the style attribute directly in the anchor tag itself:

Instead of this:
<a href= "https://www.nomadicbackpacker.com" target="_self"><font color="aa0000" >ADD THE TEXT THAT YOU WANNA LINK</font></a>

Do this:
<a href= "https://www.nomadicbackpacker.com" target="_self" style="color:#aa0000;">ADD THE TEXT THAT YOU WANNA LINK</a>

whitemonkey · ‎03-19-2021

@PaulMathews

thanks so much for that ... my old site was a disaster in that respect ..

have a few bits of coding that i may need to delete.... i will double check it. thank fully i used the same code as 1 example across my site about 20 pages id have to edit... ill get back to u as u r much more PRO than me

whitemonkey · ‎03-19-2021

@PaulMathews

ok this is the code i use periodically

<p style="padding:5px 10px; background-color:#f2f2f2; border: 1px solid #727272;text-align:center;font-size: 18px ; letter-spacing: 0.8px; font-weight:400; font-style: normal; margin: 0 auto 0.8em; font-family: 'Montserrat'; line-height:31px; color:#282828; ">This post has been re written for Nomadic Backpacker and is based on my travels in China in 2014</a>

how bad is it?

whitemonkey · ‎03-19-2021

@PaulMathews but just found a new app MIGHTY APP on weebly and does the job of my coding above ...

PaulMathews · ‎03-20-2021

@whitemonkey Generally, you want to avoid inline styline, i.e., shoehorning all the css into the style attribute within the element tag. It's okay for one-off type styling where the number of style attributes is pretty compact but should never be used if you intend to use that same styled element multiple times in your site. (The obvious reason being that, if you decide to modify the style even a little bit, you'll be hunting through your site to track down every instance of the styled element to change them.) That's what the "cascading" in css means: you make a change in the css file and it cascades across the entire site. So take a look at your site's css and learn how to modify existing css and build custom classes (like the highlighted paragraph you indicated in your example).

With regard to the code itself, the style attributes look fine but the html is incorrect. You've provided the code for a paragraph tag (code opens with a "<p..." tag) but, not only is there no closing paragraph tag, you actually have a closing font tag and a closing anchor tag (neither of these has an opening mate). The correct code should look like this:

<p style="padding:5px 10px; background-color:#f2f2f2; border: 1px solid #727272;text-align:center;font-size: 18px ; letter-spacing: 0.8px; font-weight:400; font-style: normal; margin: 0 auto 0.8em; font-family: 'Montserrat'; line-height:31px; color:#282828; ">
This post has been re written for Nomadic Backpacker and is based on my travels in China in 2014
</p>

If you wanted to use this paragraph styling in multiple locations, you could create a custom class in the site's css file that looks like this:

CSS (in css file)

.callout {
/* Callout box style content wrapper */
padding:5px 10px; 
background-color:#f2f2f2; 
border: 1px solid #727272;
text-align:center;
font-size: 18px ; 
letter-spacing: 0.8px; 
font-weight:400; 
font-style: normal; 
margin: 0 auto 0.8em; 
font-family: 'Montserrat'; 
line-height:31px; 
color:#282828;
}

HTML (in site page)

<p class="callout">
This post has been re written for Nomadic Backpacker and is based on my travels in China in 2014
</p>

Now, you can easily apply the class to any paragraph (or block element) you want with the addition of the custom "callout" class. If you decide down the road that you'd like to change the border color from #727272 to red, you just modify the border color attribute in the class and every instance of the callout styling across the site will change accordingly. That's the fundamental purpose of "cascading" style sheets.

whitemonkey · ‎03-20-2021

wow @PaulMathews so much info

am replacing some code with MIGHTY BLOCLS app and other code with customized weebly buttons

willl play with the new code of my test sites

thanks soooo much