I am new to H+M and have a quick question about how to write css for a border image. Normally, this works for me:
img {
border-width: 2px;
border-style: solid;
border-color: #012169;
}
When adding it to the custom.css, it produces no results. I've added an image transition to custom.css which works just fine.
What am I missing?
thanks,
Salle
custom css
Moderator: Tim Green
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: custom css
Hi Salle,
If that is the CSS file in your skin and not in your project (which won't get used when you apply a skin), my guess is that you need to override inline CSS in the images. However, there is another serious problem in your code: You are applying borders to ALL images in the entire project. That will also apply borders to icons in toggles and other unexpected places where you don't want them.
What you need to do is apply a class to the images you want to have borders on, and then use the class in your CSS. And in your CSS you need to use the !important attribute to override any inline CSS that HM may have applied. To apply the class, double-click on the image in the HM editor and enter an arbitrary class name in the HTML Class: field. Let's say your class is imgborder. Then you adjust your CSS code like this:
If that is the CSS file in your skin and not in your project (which won't get used when you apply a skin), my guess is that you need to override inline CSS in the images. However, there is another serious problem in your code: You are applying borders to ALL images in the entire project. That will also apply borders to icons in toggles and other unexpected places where you don't want them.
What you need to do is apply a class to the images you want to have borders on, and then use the class in your CSS. And in your CSS you need to use the !important attribute to override any inline CSS that HM may have applied. To apply the class, double-click on the image in the HM editor and enter an arbitrary class name in the HTML Class: field. Let's say your class is imgborder. Then you adjust your CSS code like this:
Code: Select all
img.imgborder {
border-width: 2px !important;
border-style: solid !important;
border-color: #012169 !important;
}
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Re: custom css
Hi Tim,
That was very helpful, thank you. I did not see the border applied to the image in the Editor, only after I published the project. I take it that is the normal behavior?
thanks again,
Salle
That was very helpful, thank you. I did not see the border applied to the image in the Editor, only after I published the project. I take it that is the normal behavior?
thanks again,
Salle
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: custom css
Yes, of course: The editor is XML, not HTML. Those are two completely different languages and CSS is only used in HTML and only in your output.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.