I'm trying to style a views-slideshow on my Drupal site, once I know how to style one part of the slideshow I can then style the rest. I have this div on the view that i want to style and I'm having trouble even putting a border color on it? the div is ...
<div class="views-field views-field-field-slide-image">
If anyone can help as to how to style it and where that would be great
Thanks
This is a old link, but I'm sure that it's useful for you:
http://www.group42.ca/theming_views_2_the_basics
Basically you have to create new files and put it in your theme.
The name of your files depends on the view. And the module recomends names.
On the other hand, you can add the border using CSS, add this for example:
.views-field-field-slide-image {
border: solid 1px #000000;
}
Regards.
Related
I can't seem to change the style of the search box on my website. This is the website. Any help with a CSS code would be appreciated.
https://urbanyogalab.com/
These are elements that are your search box:
For example, if you want to remove borders for input field, you should do something like this:
.is-menu.is-dropdown form:not(.is-search-form) input[type=search] {
border: none;
}
Similar to other elements you need changed.
Browser developer tools like Inspector are of great help in such situations.
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
}
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.
I am trying to customize one field of a discussion forum in SharePoint, basically i want
to resize (maker bigger) the body Field.
I think this can be done applying a new css specific to that field but i am not sure how to do this, becuase it's seem that some other css are overlapping the one that i created and that’s why mine is not applied.
Any ideas on how to solve this issue?
have you tried adding a !important after the css rule?
like
.bodytxt
{
height: 300px !important;
}