Within my cshtml view, i am having one div with
Id="top-navigation"
Css class defined as below in css
div#top-navigation
{
background:url('/Content/Images/bg-top-nav.jpg') 0 0 repeat-x;
height:37px;
border:1px solid #7bcdeb;
border-bottom:1px solid #7ad5f5;
}
My objective is to give as below
background:url('mysite.com/Content/Images/bg-top-nav.jpg')
but problem is, i dont want to hardcode mysite.com domain name.
what could be the solution? whether i can access server variable within css ?
Try using Dot Less CSS
http://www.dotlesscss.org/
and try declaring
#domain:'dynamic_domain_name' in your .cshtml page and use it. Here its like CSS defined in page.
Related
Hi , i'm a beginner and I tried some ideas from this website or on
google but I can't make it work. I have differents pages and in the
"about" page I would like to change the border around my picture but
i can't find out how to , because in my css there is a border for
all pictures. So my question is what to write in css so that i'll be
able to modify every single element of each page ? I tried "id" but
it doesn't change anything :/ thank you :)
Best practice would be to add a class to the image you want to style differently like this
<img class="about-page-image" src="...">
and then define the css like this
img {
border: 3px solid green; // applies to all images
}
img.about-page-image {
border-color: red; // overrides rule above
}
as per my scenario i need to store this path /img/product.png of image in razor variable and later i want to use that razor variable in CSS file. below css code is in css file
.test{
background: url('/img/product.png') no-repeat scroll 0 0 transparent;
}
so i use code like this way below but no luck still
.test{
background: url('#Model.LogoUrl') no-repeat scroll 0 0 transparent;
}
i see this post http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engine but i do not want to solve my issue as per the post. so let me know how to sort this issue. thanks
By default, MVC does not support writing server side codes in external CSS file and external Javascript files.
For your case to work, you can add an internal stylesheet in your view file itself, it will work.
Eg:
#{
ViewBag.Title = "Title";
}
<style>
.test {
background: url('#Model.LogoUrl') no-repeat scroll 0 0 transparent;
}
</style>
As far as I know, you cannot refer or write Razor code in a CSS file. CSS files are processed by the browser where as the Razor code is executed by the server and then rendered by the browser
For your problem, you will need to write an inline style
You can also do it in HTML part like this:
For example:
<div class="test" style="background: url(..#Model.LogoUrl) no-repeat scroll 0 0 transparent;">
...
</div>
I am using Active Admin, is there a way to override CSS used by the active admin theme?
For eg:- I have to change css of submit button which is disabled to cursor: wait; and make it unclickable.
What's the best way to do this?
just make a new file
app/assets/stylesheets/active_admin.css.scss
and put your scss code there.
(Or just active_admin.css with css code)
You can override any CSS property by overriding the CSS class or IDs in you own stylesheet with !important attribute if you do not have any access to the original stylesheet
For example, use
.submit-button {
color: white !important;
}
to change the color of the submit button text.
It is easy to change the styles in Rails 4. Go to
app/assets/stylesheets/active_admin.css.scss
OR (depending upon where you have kept the file)
vendor/assets/stylesheets/active_admin.css.scss
and add styles in there.
I put my form classes in a container class to create a more specific reference. Like..
.form-container {
font-family: 'open-sans';
width: 420px;
.text-field-class {
input{border:none; border-bottom: 1px;}
}
}
this is working so far... for the most part. Better than important. Though maybe using an ID would be the more appropriate way.
I am using the ASP.NET AJAX TabContainer control in a web application. I've placed images in the headers for each tab rather than using text - but the images are truncated b/c the default CSS for TabContainer states that the header is only 13px high:
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0px;
background:url("tab.gif") repeat-x;
}
I have a CSS file I'm using and have added the following line to override that contained in the default CSS for TabContainer:
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height:83px;
padding:4px;
margin:0px;
background:url("tab.gif") repeat-x;
}
But it is still using the default 13px, why?
You can see the default css file here: Default CSS File
Try using !important like this:
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height:83px !important;
}
by the way, If you don't change other properties of the default class, you don't have to retype them...
After a lot of messing around, I got it working, though I'm not entirely sure what I did...
I think, I had to:
Manually add CssClass to ajaxToolkit:TabContainer, as even when setting it via the properties it didn't seem to generate.
I tried overriding the class ajax__tab_xp, but that didn't work, so I created a new class called ajax__custom and that worked. So my CSS in the end looked like:
.ajax__custom .ajax__tab_header .ajax__tab_tab
{
height: 100px;
}
Hope this helps someone else.
Dave,
I did the same thing. Copied Tab CSS and modified to my hearts content. Them I tried to disable tabs. This was working fine using default CSS. I thought something must be missing in my version. But checking generated source, it looks like TAB generates some js in page to enable/disable - Which, if we were permitted to to that on this project I would have gone with JQuery in the first place.
Save yourself some grief and use !Important to override default css if you dont want to go to javascript city.
I am having to modify some web forms, upgraded to bootstrap and suddenly I noticed that some pages had
So The class I see generated is
class="ajax__tab_xp"
Thus based on answers above , I found that 25px is all I need
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height:25px !important;
}
That should work for others hopefully.
i need to implement two different stylesheets in a single master page. one style sheet is designed specifically for the project, and works fine. but when i add the second style sheet to it, which is used for some other project, all the web content forms look weird.
what is the best way of implementing those two stylesheets in the project?
The only thing you have to take into account is that no two styles in these files override each other. Then you can include any number of style sheets.
What is 'weird'... How do they look? Like one of the StyleSheets is not at all applied or like they both override themselves?
There's a neat thing about styling WebControls, as you should not rely on the "id" you set them to as a css-reference, as at runtime, the IDs of any Controls in an ASP-Page are reassigned.
So you should try to avoid using the same ID for CodeBehind-Access on a Control and for styling the same control.
Try using classes that are not redundant in the two stylesheets. Probably one of the stylesheets has a reset of all other styles in it, like
* {
padding: 0;
margin: 0;
}
that overrides the other stylesheet's rules.
It's pretty hard to help you with so few information...
Don't define same styles classes in two stylesheet files
and also don't define styles for html elements like body, div, tr...etc in two files.
E.G.
stylesheet1.css:
body
{
background-color:#F1F1F1;
padding:10px;
}
.search
{
background-color:#0000FF;
margin:3px;
}
stylesheet2.css:
body
{
background-color:#FFFFFF;
padding:15px;
font-size:12px;
}
.search
{
background-color:#000000;
margin:3px;
}