When I use the article creator page, I can insert an image. Upon the image having been inserted, I can edit the properties, such as the size, whether it's a hyper-link or not, whether it has a caption and whether it has "alternative text" for hovering the mouse. I've tried a number of attempts at using the 'style' entry box, but can't seem to get much from it. Can I use previously created css pointers (e.g. .forumpicckm {float:left;padding:4px;border-radius: 20px;opacity: .7;width: 300px}) or must I enter whole CSS in there manually each time? If I have enter CSS manually, must I encompass it within curly brackets or without?
How to use the 'style' text entry for images when editing images within article editor window
Collapse
X
-
I've since found that I have to add certain codes direct - can I not just name already created css classes? That would be considerably easier than rewriting code over & over & over again... Or can i edit some variable somewhere to pre-populate it with content?
VB 5.4.1 - PHP 7..2.4 - MySQL 5.5.56
No Addons - none at all. -
It allows you to insert arbitrary CSS in the style attribute of the image. Due to this, you cannot use a CSS class. The browser simply wouldn't know how to interpret that input. You can read more about the style attribute below:
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
If you're going to change the style of every image in posts, then you should do so with CSS in the css_additional.css template. You can do this by targeting:
.bbcode_attachment {css here}.Translations provided by Google.
Wayne Luke
The Rabid Badger - a vBulletin Cloud demonstration site.
vBulletin 5 API👍 1Comment
-
Alas, I can't get it working - In css.additional,
Code:.bbcode_attachment { padding: 10px; border-radius: 50px; }
Any ideas?
ps - I've purposely done fairly heavy-duty values just to make sure I can see them clearly (with the intent to reduce them once I know they're working).Last edited by karlm; Tue 29 May '18, 3:19pm.VB 5.4.1 - PHP 7..2.4 - MySQL 5.5.56
No Addons - none at all.Comment
-
Did you set a border?
border: 1px solid black;Translations provided by Google.
Wayne Luke
The Rabid Badger - a vBulletin Cloud demonstration site.
vBulletin 5 APIComment
-
Try img.bbcode_attachment.
Code:img.bbcode_attachment { border: 1px solid black; padding: 10px; border-radius: 50px; }
Translations provided by Google.
Wayne Luke
The Rabid Badger - a vBulletin Cloud demonstration site.
vBulletin 5 APIComment
-
1 PhotoTranslations provided by Google.
Wayne Luke
The Rabid Badger - a vBulletin Cloud demonstration site.
vBulletin 5 APIComment
-
Do you have other css attributes applying to the img tag later in your CSS? CSS uses hierarchical descendents and heredity to work. We take advantage of this to make the css_additional.css template work by loading it last every time. The last set of attributes overrides all the attributes that came before it.
There is a way to override the inheritance using !important after each attribute. However, this gets messy and difficult to control. It can also cause performance issues on some browsers.
In addition to heredity, CSS has levels of specificity. This allows some things to override others. The more specific your code is, the less likely it will be overridden. From least to most specific CSS will go in this order - * (wildcard for all html tags), a specific html tag (i.e. <p> or <img>), .class, #id, inline CSS with the style HTML attribute.Translations provided by Google.
Wayne Luke
The Rabid Badger - a vBulletin Cloud demonstration site.
vBulletin 5 APIComment
Related Topics
Collapse
-
by Brad PadgettHello,
There are many tags for CSS that control templates.
I'm trying to edit css_additional.css for styling my site.
I'm requesting the information to do so. As...-
Channel: Support Issues & Questions
-
Comment