Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 18, 2015 at 10:50 pm #446091
    victor1983

    Hi

    Im using below custom CSS code for an optin form but it seams the the default css(my guess base.css)overides by the default css. i only want this optin form to have different layout from the rest and not impact all inputs by Channing the default ones

    The one i want the form to look like
    http://theinternetmarketingcentral.net/optinformfinal.png
    but know it looks like

    http://theinternetmarketingcentral.net/internet-marketing-strategies/

    custom css:

    	.myForm td, input, select, textarea, checkbox  {
		font-family: tahoma;
		font-size: 12px;
	}

	.required {
		color: red;
	}
#frmSS3_optin{background-image: url("http://iem.theinternetmarketingcentral.net/image/optinformbg.png"); background-repeat:no-repeat; width:260px; height:550px;}
#CustomFields_8_3{position:relative; top: 403px; left:55px; width:166px; border:none;}
#email_field{position:relative; top:424px; left:57px; width:165px; border:none;}
#frmSS3_submit{ position:relative; top:452px;  left:28px; width:202px;height:36px; border:none;background-image:url("http://iem.theinternetmarketingcentral.net/image/optbtn.png"); background-repeat:no-repeat; background-color:transparent;}
#frmSS3{width:260px; height:550px;}
    May 18, 2015 at 10:57 pm #446099
    Yigit

    Hey victor1983!

    You can add !important rule as following 

    .required {
		color: red !important;
	}

    Cheers!
    Yigit

    May 19, 2015 at 12:41 pm #446379
    victor1983

    Hi

    i know that rule, however its seams ineffective to have to add this to every CSS shown in the code. is there not other way you can priories this so its not overrides by the base.css like if a custom.css is made then it overrides the base.css.

    regards
    Victor Johansson

    May 21, 2015 at 1:54 pm #447722
    Günter

    Hi!

    Thank you for coming back.

    Did you try to put the CSS in custom.css (or styles.css when using a child theme) ?

    These files are loaded after base.css and should overwrite the settings there.

    You can also try to make the CSS selectors more specific to avoid being overwritten.

    Best regards,
    Günter

    May 21, 2015 at 9:57 pm #448027
    victor1983

    Hi

    those seams not to work as my i think they get to low specificity number, i get the base to overwrite the css in all cases
    it works if i remove the input type[text] in the base css. however that will effect all the forms on the site which i dont want to .

    if i create more specific css lilke input then it will only change all the input field or do you mean

    <div id=”#frmSS3_optin”> {
    some code
    }

    May 23, 2015 at 7:40 am #448973
    Josue

    Hi!

    Targeting the form ID should replace get you a high specificity number, try it:

    #frmSS3 input[type='text']{
    border: 0;
}

    Regards,
    Josue

    May 23, 2015 at 6:26 pm #449084
    victor1983

    Hi changeing the specificity of the css did the trick, However it did nit be able ti change the coloring of the input background as it were overwritten by the base.css and needed to be changed from the styling in the base.css.

    Will it be easier if going with a child theme of the enfold or will that not make any change in to how the css works?

    May 23, 2015 at 9:00 pm #449109
    Josue

    You may need to use !important for that or prefix the selector like:

    #top .sidebar #frmSS3{
}

    Using a child theme is always recommended but i don’t think it will make a difference.

    Regards,
    Josue

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.