Actually this might just be a very general problem and not just affecting a few plugins. Still I'll name Nimble Portfolio and Awesome Filterable Portfolio because I noticed it with those first.
Nimble portfolio is supposed to create something like this:
But in my WordPress website it looks like this:
It's not because of my theme because I've tried numerous other themes including the default ones.
Any clue what's going on??
A working example: here , and my site where it doesn't work: here
I've been clueless with this problem for so many days now.
In your http://ankit-arora.com/wp-content/themes/manifest_v1.1/style.css change line 346 to:
#coreContent li{
list-style: none;
margin: 0;
}
Or perhaps better add the css to class bigcard. I can't find it on your page anymore..there was a template.css file:
li.bigcard {
list-style: none;
margin: 0;
}
You should learn to work with chrome developer-tools or firebug. There you see the actual style the element gets and can edit it in browser for preview.
Related
I am completely new to this and am trying to learn on my own. One thing I am having an issue on finding a solution to is how to hide the page title on a WP site. I have read that leaving the page title blank, although solving the issue, may not be good in terms of SEO, so I would like to hide page titles instead.
I have tried using multiple plugins, all with no luck. Additionally, I have tried adding additional CSS code both to hide specific page titles and titles across the entire site.
The code I have been using is
.entry-title {
display: none;
}
and
.page-id-XXX .entry-title {
display: none;
}
None seem to work. Additionally, I tried to see if my theme has an option, and it doesn't.
Is anyone able to let me know what I may be doing wrong and point me in the right direction?
Use the code below to hide header.
.header-page {
display : none;
}
This will work when the header has class .header-page.
This CSS should go inside every page where you want to hide, if its site-wide add it on head.
<style>
.header-page {
display : none;
}
</style>
Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.
i've been asked by a friend to help out with a website he's starting(e-shop). I am a total beginner so i just google everything :(. He does not have any access to the code(hosted by a provider), he can only edit the user.css file. The problem is, he wanted to remove border around the product pictures so i managed it by adding:
.product-grid .image img {
border: 0px;
}
This worked fine for the product grid on the homepage("home"), however does not apply for the product grids within categories(picture "category"). It shows me that a different css is applied than mine user.css. Any idea. Just from the basics i've thought the user.css will overwrite any previous css that would refer to the same. Any idea how i can define the same for other pages as well?
category
Home
to overwrite any previous css use "Important"
.product-grid .image img {
border: 0px !important;
}
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!
I'm having difficulties getting an embedded YouTube video to not show on my site. The thing is there are two of the same embedded videos on the page and I would like to hide one.
There are 2 because one is generated by the wordpress theme (I have to paste the embed code somewhere in the theme settings) while the other is the direct youtube link pasted into the editor, the sole purpose being to auto generate featured image from the video thumbnail.
I would like to hide the second one, preferrably. I know it can easily be deleted by deleting the YouTUbe link in the text editor after publishing. But I want it to not to have to show at all at the time the page is initially published.
In attempt to hide any of the 2 videos, I have tried this CSS and it doesn't seem to work
div.entry-video-wrapper {display:none !important;}
div.entry-video iframe {display:none !important;}
div.fluid-with-video-wrapper {visibility:hidden !important;}
Is there anything I might be doing wrong?
Here's the sample page I'm working on http://wazobiajournal.tv/gallery/game-of-thrones-season-4-fire-and-ice-foreshadowing/
If you want to hide first video then use:
.entry-video .fluid-width-video-wrapper{
display: none;
}
If you want to hide second video then use:
.embed-youtube .fluid-width-video-wrapper{
display: none;
}
Although your code is also working and it seems that you have to clear cache to see it in action.
Note: Avoid using !important, it is not a good practice.
Try to clean cache maybe. I'm just trying to add display: none; for .entry-video-wrapper in CSS and it's work for me:
.entry-video-wrapper {
margin: 0 -30px;
display: none;
}