x

How do I edit my css in weebly with html/css editor?

Hi, I tried to add my own text font css code to the html/css editor, but I don't know how to connect it so that when I publich my website the css would be applied. 

Currently, I'm trying to edit my texts with css on code embed like:

<html>

......

....

<style>

#randomtext {

color: #ffffff;

font-size: 30px;

}

</style>

Basically the standard, way but that doesn't seem to work since, when I publish the website css text styles that I edited doesn't appear.

So I want to find out how do I edit css in html/css editor & then connect it my code embed.

If you know how to do it, could you please help me with it? Thanks

8,897 Views
Message 1 of 5
Report
4 REPLIES 4
Square

It might be easier for our Community members to help if they can see what text on your site you're trying to customize. What's the address of your site, @Khongor?

8,886 Views
Message 2 of 5
Report

Hi Kongor,

There are a few ways you can edit the CSS, you can go to Theme > edit HTML / CSS and edit the css file, depending on if you're on a new or old theme, if you're on an old one, look for main_style.css but if you're on a new one look for global css file. The other way you can edit the css is by using an "embed code" element which I assume is how you're doing it now, and wrapping the css in style tags. You can also add css to your page header from Settings > SEO > Header Code, or Pages > click on the page on the left > SEO Settings > Header code. If you put the css in the header, make sure you wrap it in style tags as well. Also if the class you're looking for isn't on the css file, that means it's hard coded on the backend, what you need to do is recreate the class on your css file, then use the !important tags to make sure it overrides any classes already created. 

8,846 Views
Message 3 of 5
Report

Hi ThemeTricks,

Your response makes sense, but as a novice I'm not sure how to use !important tags or wrap it in style tags.

What I'm doing is embedding code from mailchimp, into weebly: 

<!-- Begin MailChimp Signup Form -->

<div id=“mailchimp”>

<form action=//personal stuff//>

    <div id="mc_embed_signup_scroll">

<h2>Subscribe to our mailing list</h2>

 

<input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

 

 

<div id="mce-responses" class="clear">

<div class="response" id="mce-error-response" style="display:none"></div>

<div class="response" id="mce-success-response" style="display:none"></div>

</div>

 

<div class="clear">

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">

</div>

</form>

</div>

<!--End mc_embed_signup-->

 

This works great, but now I want to edit the style of the fields, which the article I'm using (http://uhurunetwork.com/customizing-mailchimp-form-design/) provides the code for:

 

 

 

#mailchimp {

background: #f8f8f8;

color: #3D6392;

padding: 20px 15px;

}

#mailchimp input {

border: medium none;

   color: gray;

   font-family: times new roman;

   font-size: 16px;

   font-style: italic;

   margin-bottom: 10px;

   padding: 8px 10px;

   width: 300px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

#mailchimp input.email { background: #fff }

#mailchimp input.name { background: #fff}

#mailchimp input[type="submit"] {

background: #115B87;

color: #fff;

cursor: pointer;

font-size: 15px;

width: 35%;

padding: 8px 0;

 

}

#mailchimp input[type="submit"]:hover { color: #F2C94C }

 

I've tried putting this at the bottom of the main_style file in the CSS editor and adjusting the parameters but it seems to have no affect. Do you know if I'm putting the above code in the wrong location or if it's not written properly so not linking to the embedded code? 

 

Thank you!

David

8,808 Views
Message 4 of 5
Report

I ran into the same issue while making the exact same change to our website. I have a new computer and didn't realize my keyboard was configured to use smart quotes. They don't work so well in coding. Smiley Happy It took a close look at the code to realize what was happening. Everything started working great the minute I replaced the quotes.

4,286 Views
Message 6 of 5
Report