Is there a way to put a title of a module (in my case a banner module) over an image?
Here is an example: http://www.nulaena.si/temp
I would like to put text "Ask a technical question" over the yellow image (background).
I tried with margin-bottom: -10px and z-index but with no success. Maybe I didn't do it right.
This is the code I have so far:
<div class="moduletable_banner-yellow">
<h3>Ask a technical question</h3>
<div class="bannergroup_banner-yellow">
<div class="banneritem_banner-yellow"><img src="http://nulaena.si/joomla/images/banners/banner-yellow.png" /><div class="clr"></div></div>
</div>
</div>
.moduletable_banner-yellow h3 {
margin-bottom: 0px;
padding-left: 20px;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-shadow: #6374AB 2px 2px 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
text-align: left;
}
I tried to put banner image as a background like in the example:
.moduletable_banner-yellow {
background-image:url('http://nulaena.si/joomla/images/banners/banner-yellow.png');
height: 50px;
width: 511px;
}
But then you can't click on the banner because there is no image selected in the back-end (there is no link, only text). If I select an image it is pushed down because of the text.
I guess another option is to modify source code so would be a link, but I would rather avoid it.
Try using absolute positioning with the text? I think that may work. Give the two modules the exact same position in Module Manager, and then 'absolutely position' the text so it's over the banner?
Or perhaps just load the image & text into the same module? I'm not sure I see the benefit of doing it using two separate modules? What would be the point if they're just going to overlap?
Related
I am trying to modify a woocommerce website and I have very little HTML/CSS training. Most of what I've learned has come from trial and error, some online tutorials, playing around with the developer console in Chrome, etc....
I'm trying to add an image border to the top of a page header right before an area called tg-container. I was able to put one below it, using an existing class, whose info I didn't need to see. Can it be done with the Additional CSS interface built into the theme or do I have to go into the style.css and html to create the boarder? I know the benefit of the Additional CSS interface is having no need to edit the theme files directly whenever the theme is updated.
Bypass Page
Example Page with border - accessible only after bypass page is visited
IMAGE: Example page with Chrome Developer Console open and showing code for area
-------------------- Further Experimentation-------------------------
I created a child theme and am trying to add it that way, but I am missing something (because I'm not a coder), I was able to create the area for the image, but the image isn't showing up. I've tried adding it in the child theme and in the parent theme (editing style.css and page.php).
In the page.php of the child (and the parent) (after the following)
<div class="page-header clearfix">
<div class="tg-container">
I added
<h3 class="title-border"> </h3>
I've tried this in the style.css of the child:
/*Add Wycinanki Borders*/
.title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0;
}
I've tried this in the style.css of the child:
/*Add Wycinanki Borders*/
.page-header .title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0;
}
I've tried this in the style.css of the parent:
.page-header .title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0; }
Again, it has created the space for the image, but the image isn't showing up. I copied the other attributes from the "entry-sub-title", where I was able to put the image successfully, thinking that they would be styled the same way.
Thanks for any insight and helping me learn what I'm doing, hahaha.
Ok, I got it figured out. I added <div class="title-border-top"> </div> above the page title (and actually added <div class="title-border-bottom"> </div> below for future modification.
I then added the following in the Additional CSS:
.page-header .title-border-top{
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
height: 30px;
margin: 10px;
}
It is working and I hide the entry-sub-title I had taken over for the border to begin with. Now I have to figure out which page templates WP is pulling for all the main pages, so I can add the html to them.
I have a blog and am using the CSS float feature for highlighted text in boxes within my article. So, if there is an important sentence or two in my article, I showcase that within a text box using float.
For many of my readers, this displays correctly. But some of them say that the text that is supposed to be inside a highlight box appears as inline text, and so they complain that I have repetitions in the article.
Why is this happening? I thought that in html, if the browser does not understand something, it is supposed to ignore it. So, in this case, I would have thought that if their browser did not support CSS, etc., then it should have simply ignored the text in the highlight boxes, not reproduced them as plain text.
This is the CSS code I am using:
#boxedquote {
float: right;
width: 45%;
margin: 0.5em 0em 0.5em 2em;
padding: 0.1em 1em 0.1em 1em;
border: 4px solid;
border-color: Gold;
border-radius: 10 px;
font-size: 120%;
font-style: italic;
font-weight: bold;
}
#boxedHighlights {
color: #556B2F;
}
This is an example of how it is used:
<div id="boxedquote">
<div id="boxedHighlights">
<p>
The possibility of a romance of a Muslim “villain” with a Hindu queen being depicted on screen, even as a fantasy, as has been rumoured, infuriates Hindu right-wing groups.
</p>
</div>
</div>
This is my blog page:
http://www.leftbrainwave.com/2017/11/why-indian-civilization-should-be.html
I have designed this website http://faitmaisoncuisine.com. On the index page there is subscribe to newsletter. The go button is not clickable while it works when you press enter on keyboard. It is something to do with css. I spent 2 days on it and can't find the solution.
Can you please suggest what I am missing here.
You have this part of the code:
<div class="grid-12">
<p class="h1">Our Offerings</p>
<p class="homeOffering">Fait Maison is a creative catering concept based in Dubai that also offers innovative tailor made plans to suit the bio-individuality of each person.</p>
</div>
CSS for these elements:
.h1 {
font-family: 'Titillium Web', sans-serif;
font-size: 1.6em;
color: #946c60;
margin-top: -80px;
padding-left: 10px;
height: 1px;
}
.homeOffering {
padding: 50px 421px 10px 10px;
font-size: 1.25em;
line-height: 1.3em;
}
The problem is caused by the following: You gave a -80px margin to the .h1 paragraph, and that causes the newsletter box to be overlapped by the .h1 paragraph.
What you need to do (without redoing the entire layout) is:
Change the div class from grid-12 to grid-8
Change the right margin of the .homeOffering paragraph from 421px to something around 50px, so you can get the original paragraph layout back.
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
I'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}