- This topic has 18 replies, 3 voices, and was last updated 8 years, 2 months ago by
.
-
Posts
-
Hello,
I’ve got this html
<span>TEXT</span>and that css
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#6680B9 0%, 86c2db 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: “”;
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid 86c2db;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid 86c2db;
}
.ribbon span::after {
content: “”;
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid 86c2db;
border-bottom: 3px solid transparent;
border-top: 3px solid 86c2db;
}and I want to add the ribbon appearing on the top right corner of my homepage, overriding anything else.
I guess I can add the CSS with simple CSS.
How and where do I have to add the html?
Thanks
HarrisCustomer Support
Hi there,
I think you can try the top bar widget:
https://docs.generatepress.com/article/top-bar-widget-area/Or before header hook and make it float right:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/Let me know if this works.
edited
I managed to place it at the top bar as a widget.
Now I am trying to move it down either to the navigation top right or to the content top right.
The problem I have now is that into whatever hook I try to put it it still shows in the same place.
On the top right of the top bar (I have removed the widget that was placing it there)I tried almost all header and content hooks.
Have in mind that I am not using header but I am using navigation instead.
Please help
Thanks
Can you provide a link to your site?
Same as in the other ticket 🙂
Juse added it back so you can see it.Its in the inside content container hook so I assume it should show in the top right corner of the moving photo
Lead Developer
Try adding this:
.site-main { position: relative; }Thanks! It is placed properly now.
Is there some way I can have it only in the homepage?
How/where are you currently adding the HTML element?
Hello!
Its in the “Inside Content Container” hook.
Code is:<div class="ribbon-wrapper-green"><div class="ribbon-green">MYKONOS</div></div>Try this in the hook:
<?php if ( is_front_page() ) : ?> <div class="ribbon-wrapper-green"> <div class="ribbon-green">MYKONOS</div> </div> <?php endif; ?>Hello,
This makes all site’s pages loading nothing but header (navigation)
Did you check Execute PHP?
Yes. Otherwise it wouldn’t break the site 🙂
Sorry had a typo before. Edited the code. Give it another shot?
- You must be logged in to reply to this topic.
