I have been playing with Drupal 8. At the moment I want to have an image as the header background in Bartik. For this I created a subtheme called "freex" in the following way:
Create folder freex in /themes/custom/
Create freex.info.yml in /themes/custom/freex/ containing:
name: Freex
description: Basis thema voor verenigingen
type: theme
core: 8.x
base theme: bartik
libraries:
- freex/global-styling
Create file freex.libraries.yml in /themes/custom/freex/ containing:
global-styling:
version: 1.0
css:
theme:
css/style.css: {}
Create file in /themes/custom/freex/css/ called style.css containing:
#header {
background-color: yellow;
}
Just to see of it works... It doesn't, the header does not change background color. Any ideas as to what I am missing?
Turn off the page cache: Configuration Menu -> Development -> Performance
Uncheck the checkboxes : Aggregate Css files, aggregate javascript files.
If you do this, when you see page source, you see your file name style.css - not the generated css file name, as you write. At the top of the performance page, click to clear all cache. And after that, see your page.
The Bartik theme includes colors.css last (I think it's auto-generated from the theme settings) so the subtheme colours are overriden by the later color module colours.
Add "!important" to your CSS color settings, so they won't be overridden. For example:
#header {
background-color: #CDBE79 !important;
background-image: linear-gradient(to bottom, #CDBE79 0%, #CDBE79 100%) !important;
}
Related
can anyone help me? I would like to show my own Image in the Navigation List. I've already tryed it in the Shared Components / List Details / Edit Desktop Navigation menu but he didnt show my image. See Attached image
at the Page HTML shows me that he put FA in front of my image :O
span class="fa *********/r/425/files/static/v11/2018-06-13 08_34_21-Durchführung CAB.png"
In this place you put class name of FontApex or custom css class which contains image info.
For example:
Image/class: slon
Inline css for page:
.slon {
background-image: url(#APP_IMAGES#2.jpg);
background-size: 35px 35px;
}
I would like to change the size of the text in my 'About' page of my big cartel shop (foundry theme). I would also like to change it from left-aligned to centralised layout. Where do I find these in the CSS?
To make this change it'd be best to add code to the very bottom of the CSS section in your admin, like so:
section.content .custom_page {
font-size: 16px;
text-align: center;
}
Simply adjust the font-size value to whatever you'd like (the theme default is 14px) and you'll be good to go.
I want to change default front page sensenet slider,which should cover full page of browser.I changed height of slides to 100% in file system and content explorer i also added li{height:100%} and img{height:100%}enter image description here
I also want to hide/remove by default slider name which show on images.
There're two things to modify:
Open /Root/Global/renderers/Slider.ascx and change 'snmaxheight' in the slider config (line 117.)
snmaxheight: window.innerHeight
Add the following to the slider .css file (/Root/Global/styles/snSlider.css)
.orbit-container li .text {
display: none;
}
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
LIke the title says, how do i edit the xhtml/css of a module in the joomla 1.7 interface?
U can simply create additional CSS file (or even include to your existing one) for your template.
Firstly using Firebug/Chrome find the CSS path to your module. ex. "div.container div.mod-languages"
Secondly create some CSS rules for your module:
div.container div.mod-languages {
position: relative;
float: left;
color: #DADADA;
}
Additionaly you can add "!important" declaration to your rules to make sure they have higher priority to "default joomla's rules", example:
position: relative !important;