Is it possible to define the base URL used for <img>-tags of a certain class via CSS?
For example my <img>-tag would look like
<img class="switchingURL" src="pic1.png">
Then I'd like a kind of CSS element like:
.switchingURL {base-url: /images/;}
Then if I want another picture set, I'd rewrite it to something like:
.switchingURL {base-url: http://www.tempsite.de/newstyle/images/;}
Does a tag similar to the base-url I used in the examples above exist?
SEARCH NO MORE , you can not do that with css .
but it's your lucky day , with a simple line of jquery you can do that .
$('img[src=""]').attr("src", "images/someimg.jpg")
the above line searches for empty src and sets it to images/someimg.jpg
Related
I've made a website using the academic theme of hugo; there's an example provided here. I want all of my posts (of which there are three examples provided at the link) to be wider. For example, a post initially looks like this:
where the text is constrained within a more narrow window, but I want it to look like this:
where the text has the same width as the page.
I notice that I can make this happen by unchecking the 'max-width' specification in '.article-container'. How can I edit my local files for my personal page with the academic theme to make it so this automatically happens?
This may be done by overriding the CSS in the .article-container selector.
.article-container {
max-width: none;
}
The simpler way is to create a file layouts/partials/custom_head.html where you place the above CSS rule inside a <style>...</style> block.
Another way is to create a file assets/css/custom.css with that rule, and then updating the property plugins_css in the file config/_default/params.toml so that the new stylesheet can be included as part of the loaded stylesheets.
plugins_css = ["custom"]
I am trying to have a wildcard for:
#room-userlist-user-username
Where I would like room to be wildcarded, is this possible?
I have tried multiple things to fix this but am unable to find a solution.
Please note this is to be used with stylish, so I can't add HTML.
You could do this:
element[id$='-userlist-user-username']
This selects all elements whose ID ends with -userlist-user-username.
jsFiddle example
You can use an attribute selector with a wildcard.
[id$=-userlist-user-username] {}
http://jsfiddle.net/9h7m2bn7/
This question already has answers here:
Apply different css stylesheet for different parts of the same web page [duplicate]
(4 answers)
Closed 9 years ago.
I have a website with a corresponding CSS file that defines all its styles. However, there is a specific DIV container on one of the webpages that I would like the styles to be different.
Here is my newbie question: Is there a way to specify another CSS file that applies to just within that DIV??? If so, how? If not, are there any other way of achieving a similar effect?
Thank you very much.
You can achieve it in the following way :
1. Assign a class to the concerned div like
<div class="different">
And then style this class different in your default css, for example :
.different{
font-size:12px;
}
2.The other way is to use IDs , since ids are unique to one element and on page only one element can have that ID .
<div id="diff">
And than in your current css file you can write something like :
#diff{
font-size:12px;
}
They both will serve your purpose but classes can be used multiple time and IDs are unique to a given element. So it's up to you to decide which method you follow.
You can write another class of your existing css file or create a new one(in case of new one, you need to add reference of it in your head tag and) and write their css properties for that div like this
.MyDivClass
{
// your properties here
}
and use it with your div like this
<div class="MyDivClass">
</div>
I don't know. I will do it like this
<div id="special-div"></div>
and I will create a special css file and include #special-div{/*styles here*/}
It is best to include the stylesheet in the <head> I think.
A question about CSS.
I am working on some dated code. This code has its own css rules which are linked to some 'css manager'... now I want to use jQuery UI with its nice and cute dialogues etc.
Now my question is:
I have a css rule say...
#menu-bar{something}
jQuery UI is using rules like:
.ui-dialog-titlebar{something2}
Can I (without modifying jQueryUI stylesheets) do something akin to :
.ui-dialog-titlebar = #menu-bar?
So .ui-dialog-titlebar will be overwritten with {something} from #menu-bar?
Thanks in advance.
PS. Let me add that I can not simply do
.ui-dialog-titlebar {something}
becasue {something} is changing depending on the 'style manager' used.
I don't think a css rule can inherit from another one, definitely not CSS 2 or CSS 3. What you can do is to add multiple css classes to the elements. In your case, you could simply add the ID to the dialog element:
<div id="menu-bar" title="dialog">...</div>
or add it programmically:
$('.dialog').dialog(...).attr('id', 'menu-bar');
Note though, #menu-bar should really be a class rather than an ID, if you want multiple elements to have the style.
I am trying to use a CSS selector to click on a link in Selenium but it fails to recognize it.
The link called "Cancel" appears in two places in the page.
The xpath for the first Cancel link is:
//html/body/div[#id='c_account']/div[#id='a_returns']/div[#id='container']/div[#id='main']/div[#id='main_col']/div/div[#id='create-return']/div[1]/div/a[2]/span
The xpath for the second link is:
/html/body/div[#id='c_account']/div[#id='a_returns']/div[#id='container']/div[#id='main']/div[#id='main_col']/div/div[#id='create-return']/div[4]/div/a[2]/span
When I inspect both links in Firebug I get the same CSS path.
html body.p div#c_account.c_wrapper div#a_returns.a_wrapper div#container div#main div#main_col div.main_content div#create-return div.return-process-actions div.return-process-action-buttons a.return-process-cancel
And when I use Selenium to click on the second link it clicks the first because the css path is the same for both.
Is there a way to distinguish between the two links through css path?
Use the x:nth-child(n)
Look up this site: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ ... what you need is #22
Also, you really might not need such a long css selector, you can just use
a.return-process-cancel:nth-child(1)
a.return-process-cancel:nth-child(2)
You'd be better off in the long run adding an id with a meaningful name to the links you want to click. Your test will be much easier to read later when you have lines like
selenium.click("firstCancelLink");
than
selenium.click("css=html body.p div#c_account.c_wrapper div#a_returns.a_wrapper div#container div#main div#main_col div.main_content div#create-return div.return-process-actions div.return-process-action-buttons a.return-process-cancel");