I am trying to show the information in the notice class.
I have try adding content: but this doesn't work.
.notice {
color:red;
content: "information below are instructions for this method for this page";
}
<div class="notice"></div>
I was wondering if the text in the content can be shown in the div?. I want to show actually what is in the notice class whenever I call the notice class. I have about 40 pages I need to do this to and some people might thing I should just type it in all pages but that information in the content changes.
Is they a way to do this in css?
The content property only works on the :after and :before psuedo classes, e.g. try:
.notice {
color:red;
}
.notice:after{
content: "information below are instructions for this method for this page";
}
<div class="notice"></div>
See this fiddle
That said, CSS should be kept for styling and not content - which should be output in your HTML, and controlled by either whichever serverside tech you're using (e.g. PHP, Python), or a JS bridge.
I think i your case it is better to make a PHP if statement for the notice. that would be pretty more usefull
Related
In my typo3 project I have a fluid template that renders bodytext from CMS:
<f:section name="Main">
<div class="RteContent">
<f:format.html>{data.bodytext}</f:format.html>
</div>
</f:section>
Now, in the RTE you can set links for files or links for pages. My goal is to have a different styling for file links. Is there any way to find out what kind of links are being set and then apply an according CSS style for this type of file link?
parseFunc
The HTML output of RTE content is controlled by a parseFunc (see https://docs.typo3.org/other/typo3/view-helper-reference/master/en-us/typo3/fluid/latest/Format/Html.html). The default is lib.parseFunc_RTE but you can use your own.
If you are a TypoScript magician (I am not) it can do pretty amazing things (https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Functions/Parsefunc.html#makelinks). I would look into makelinks.http.ATagParams (stdWrap).
CSS
Yet there is probably a much easier way. By using TYPO3's fixed file storage URL to our advantage we can use CSS selectors to match links to files.
This might need adapting depending on your configuration which might influence link generation (config.baseUrl/absRefPrefix)
a[href*="/fileadmin/"] {
background: yellow
}
or
a[href^="/fileadmin/"] {
background: yellow
}
or
a[href$=".pdf"] {
background: yellow
}
How can I display the "$" sign through CSS Content:" " I've tried all kinds of different codes. Putting just
div.example {Content:"$1000";}
displays on the site like "00".
Trying to do this before resorting to Javascript.
.dollar:before {
content: '$';
}
You can use the following code for displaying the dollar sign in the CSS content property
div.example { content: "\0024"; }
There isn't quite enough HTML to go on, but to take a shot:
The CSS property content is to be used with ::before and ::afterand when i put a $ inside my content declaration, everything works...
See JSfiddle here
I copied CSS code for bs-example from the Bootstrap 3.0.3 docs site. I'm kind of a beginner with CSS, so if anyone could explain me this I would be thankful.
The following code:
/* Echo out a label for the example */
.bs-example:after {
content: "Example";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
It works as expected,
but I would like the title, EXAMPLE, can be changeable. I would like to use a tag like let's say <zd></zd>.
Thanks in advance.
Prior to writing this answer, I didn't realise that editing Pseudo Elements (::after) with JavaScript was a little trickier. Although with this question/answer on StackOverflow made it relatively easy with JavaScript.
The concept was still the same, upon Page load the browser renders what is stated on the Style sheet, there after you must use JavaScript to manipulate it's contents to render something different.
Hence the CSS looks at the attr(data-content), which means it'll look for the data-content attribute within the HTML.
.bs-docs-example::after {
content: attr(data-content);
}
This looks for the data-content="":
<div class="bs-docs-example" data-content="Example Header">
Which renders:
To change it there after, all you have to do is change it's data-content attribute with JavaScript, in the demo I use jQuery to quickly select the DOM element and adjust it's data-content attribute.
$('.bs-docs-example').attr('data-content', "New Header Title" );
Demo Fiddle: http://jsfiddle.net/u2D4M/
If you wanted to do this without jQuery:
<script>
var getHeader = document.getElementById('bs-header');
getHeader.attributes["data-content"].value = "Hi, New Title";
</script>
Demo Fiddle: http://jsfiddle.net/9wxwxd4s/
The :after selector Insert content after every .bs-example class.
Here, the Word Example will be added after every .bs-example.
[please refer this link]http://www.w3schools.com/cssref/sel_after.asp
Instead of using content:"Example", you can edit your titles in html and assign the same class to all titles. header tags are preferred. ie., You should definitely create a new custom stylsheet and override the classes you want to modify. This is a way you can always go back to the default styling provide by bootstrap.
This is a simple and easy step followed by all web developers as per W3C std.
Still you want to change title by code, you can get help from jQuery or JS.
Tip from Christofer Eliasson: If you want to redesign your page, you can just exchange your custom stylesheet with a new one. Instead of getting a completely new bootstrap file to be able to start over. Also, if you just want to go back to the default styling on just a few elements, it would be a mess to remember what changes you have made. So, write your custom css code in a separate stylesheet.
In my site I am stick with some CMS. In my cms there is some sticky layout.
Now My client needs two different look on it.
So when I am on "homepage" my DIV class test show different and when I am on other page so that same class work different.
This is for home page
.test {
some data
}
This is for Other Page
.test {
some data
some data
}
So is there any way to make condition in css that if my URL is homepage so call this otherwise call this.
You should add a custom class on your body, like the page name.
<body class="home">
...
</body>
<body class="my_page">
...
</body>
Then you can have a different style for each one.
.home .test {
background: red;
}
.my_page .test {
background: blue;
}
You can't use CSS to detect the URL. So, you'll need to detect the URL with JavaScript (like this), or better, detect it on the backend.
Same css wont work differently for different pages(URLs), One way you can do is changing the inline styles with JavaScript. But it will be painful if you suppose to change a whole style-sheet.
Other way is, it is more than detecting the URL, you need to change the style-sheets dynamically for different pages. Different style-sheets may have same classes but with different styles.
Therefore, create separate style-sheets and apply dynamically.
You can get some idea about changing style-sheets dynamically here
You could use JavaSctipt to detect the URL, and then again use JavaScript to add an extra class to the body if you are on the home page. You then write separate CSS styles for elements contained within this new class.
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.