We're using Django Material (MaterializeCSS as CSS framework) on a new project we are building, and we got an issue with a language selector in the admin navbar. The issue is happening on Firefox, not on Chrome, and I couldn't find what's causing this. Can you check it please? The URL is: https://accountant.swapps.io.
Here is how it looks for reference.
The templates doesn't have a lot, and the CSS for this is minimal but I can provide code if needed. Thanks!
The dropdown is set as a block element making it to take more space. This should fix it.
.nav-wrapper .select-wrapper input.select-dropdown {
display: inline;
}
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
In my Angular2 project, I extract some common css into a global-style.css file and link this in index.html.
I also link third-party css in index.html but third-party css conflict with my global-style.css.
Let's see a concrete example.
In my global-style.css I have a style
.display-none { display: none; }
In bootstrap css there is a style
input[type="file"] { display: block; }
When I want to hide file picker I write the code
<input class="display-none" type="file">
But file picker still display because input[type="file"] have higher specificity than .display-none. (according to https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
There is a Plunker live demo: https://plnkr.co/edit/7HOT1if3ZhtSGu0UXOZX?p=preview
My question is, how to make my global-style.css have higher priority than other third-party css?
I know the way declaring !important but is there any other more elegant way? Thanks for any answer!
Here are some things you might be looking for:
Put the bootstrap link before your 'global-style.css'. This will solve your problem as the order of the links is the order that the CSS will be brought in.
Just use !important. A 10 character solution isn't not elegant.
I am new to CSS and have the following problem.
I have created a Joomla 3.3 site using a free template called Prismatic.
My problem arises when i write an article and use bullets at some point.
Bullets show fine on the backend but i get nothing on the frontend.
After reading various posts and forums i got the idea it has to do with the template.css but thats as far as i can get..
My site demo address is "white.dr-tsekouras.gr"
and the axact url where the bullets dont show is:
http://white.dr-tsekouras.gr/index.php/2014-10-13-12-15-44
Sorry the site is in greek
Can you please help ..
You just need to add your own custom styling to your lists.
ul {
list-style: disc;
}
Then, get these styles to be included when your website is loaded. The simplest way would be to create a separate CSS file, and reference it directly in your header.php file of your template.
This is a tricky one...
There is
body {
color: #fff;
}
on several places of your CSS. That means bullets are there, but white. Background is white as well. Remove that color: #fff;.
EDIT: Added DevTools print screen showing the problem:
Just remove this from basics.css
ul {
list-style: outside;
padding-left: 0;
}
BTW, this template is pretty poorly coded. I'm anticipating it will give you more headaches than this!
The design of the page should look like this:
http://www.ski.kommune.no/Skoler/Finstad/
Another css-file is loaded in this page, bringing some unwanted attribute of the css-tags, which makes the design undesirable, e.g. the text in the blue field is moved.
http://www.ski.kommune.no/Skoler/Finstad/Praktisk-informasjon/Test-av-bildegalleri/
Which css-tags are creating the design problem in the above example? I looked with Firebug, but I couldn't find.
What is the best way to restore the design?
The problem comes from 5th item in your main horizontal menu.
The list item there has a class="calendar".
according to browser developer tools that class is:
.skole .calendar, .skole .news-list {
overflow: hidden;
margin-bottom: 20px;
}
the problem there is margin bottom.
to solve the problem:
the best way is to separate the 2 classes and remove the margin-bottom from the calendar class.
a word of advice:
try learn how to use different browsers developer tools.
in my view the bests are chrome and firebug.
have fun!
I am trying to apply the folowing css rule
div#ja-navhelper.wrap {
display: none !important;
}
to the following joomla site
http://nuevas-tecnologias.org/index.php
but it is not working
any idea why?
It is bad practice to do this div#idofelement. It is better to just do this: #idofelement
Are you sure you're actually setting it? Because I'm not seeing it anywhere in your CSS for the website when I check using Developer Tools. However, you do have an empty #ja-navhelper{} and if I simply set display:none; inside it via Developer Tools... it works!