I have created a view in the back-end named 'photo gallery'.
I have CSS in style.css where class name is
.gallery{...};
I want my photo gallery to have the .gallery CSS.
In the views block I have tried giving the Css as
settings-> add field html-> add css class-> .gallery
but its not taking the css. is there any other way? what am i doing wrong here?
can anyone help me how to achieve this?
drupal should add wrappers to your view by default, the correct CSS class to use should be:
.view-photo-gallery{}
or when it's in a block:
#block-views-photo-gallery-view-block{}
Also classes for first, last, even and odd rown will be added.
If these don't work, use inspector to determine the correct classes
Related
I'm using a button from a library (https://www.npmjs.com/package/#react-oauth/google I understand this library has a custom button option but this option results in a different response).
I basically like to change the max-width and width to another value (image attached below). May I know is there a way for me to edit these style from CSS?
Thank you! Appreciate any help.
Google adds this button to the dom inside iframe, there are certain props you can style the button
to add with, check prop width on
it's mentioned on #react-oauth/google github README
https://developers.google.com/identity/gsi/web/reference/js-reference#width
So still new myself currently in a full stack boot camp in the react section. It should be possible.
Are you using a external stylesheet or trying to do it using inline?
I was taught to use a external stylesheet
From what I am seeing try changing class name to button.
class='button'
Then in your external stylesheet add
.button {
max-width: 400px;
}
Edit. I see you are using react... So it could be className='button'
Edit:
Hello, thanks for your reply! Hmm... in this case I am not able to
assign a className to div myself as the div is from the library. The
weird class you see above "nsm7Bb..." is not by me. Hence, I was
wondering if there's a way to forcefully override library class style.
– Olympian Collections
Gotcha.
Have you tried !important?
Is that your inline CSS?
I have provided a template and it contains many CSS files in head and the body is divided into header ,content and footer portions. I want to add to add bootstrap in order to utilize its grid system for its content part. But when ever I add bootstrap.css in head above or below all the style sheets in <head> content part and footer part renders well but my header portion of the body encounter certain design problems as many of the properties in other css files get overridden by its grid system.
All I want to know is, is there any hack I may be able to use the
bootstrap.css for the content part?
I have also tried linking the bootstrap file in <body> below the <header> and above the content portion(I know its not a good practice.) . but it also causes the similar problems for the header portion.
What you can do is make and download a custom bootstrap version from http://getbootstrap.com/customize/ that contains only the grid system and use that CSS in your web app.
No, you can't. You're going to either have to change your markup and adjust the styles accordingly, or use an ID wrapper and change the styles in your CSS to only target <header> under that specific ID.
You're better off adjusting your styles to fit bootstrap, though.
Try adding !important to the properties that you want to customize in your CSS file.
But the best way I see to solve your issue is modifying the bootstrap.css file adding your configurations and adding !important if necessary
I'm working on integrating the Gridiculous grid with the Genesis Framework. Genesis already has some nice responsiveness built in, but I'd like to be able to quickly adjust my layout and get the nice fluidity that Gridiculous offers.
To do that, I'd like to be able to add custom classes to the major layout elements such as content, and sidebar. So, I'd like to be able to add a CSS class of .c3, .c8 etc to specific HTML elements. I need to be able to take
<div class="primary-sidebar">
and make it so that it's
<div class="primary-sidebar c3">
Am I barking up the wrong tree here? What path would be best to take to add specific classes like this to different elements? Body classes and post classes won't really work for this.
If I understand your question, I think you're definitely on the right track. You will have to write those multiple classes, of course, on your own so that the applied properties can take place. I would say start with whatever the Gridiculous supplies you in the CSS, and then add any additional styling in your own stylesheet.
In short, you would have to include the primary-sidebar c3 class in some stylesheet, but you can just copy the primary-sidebar properties given, and add your own customization to them. Hope that helps!
I am working on a mobile site which is linked to online css which I cannot change. I added twitter bootstrap to that site. Bootstrap is applying but not 100% on all FORM HTML tags like select. All I want that if styling is not applying i'll force it somehow on that element, kindly let me know how can i do that. On form tag select the down arrow is not comming which is quite irritating. Kindly let me know how can I force the select to behave like the by default random styling.
You'll probably have to put your own stylesheet embedded into the of your document. Maybe use !important if it doesn't overwrite
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.