How to create the same title as per Sportgear demo

Hello UB team!
I have purchased the Sportgear theme with the UB content slider today and very happy with the result. What a masterpeice, It look amazing!!!’
One little problem (on my side): I can’t wrap my head about how to create the same Title and Button as seen on the Sportgear’s demo homepage? The title floating over the slides.
I have everything setup correctly, but I just don’t know how or where to insert this floating title block. I also want to have the transparent effect also…. exact same as the demo.
Can you please copy/paste the code/block and let me know where I need to place it please.
Magento 2.1.4 here
Thank you very much for your kind help
GTC

4 answers

Profile photo of gtc 30.00 $tone February 17, 2017
Public

Okay -- just answered my own question. Anybody who wish to do the same:
 
Place this code inside your UB Content Slider’s description field:

<div class="item-desc">
    <h2 class="title">BULK DISCOUNTS $100</h2>
    <p class="desc">Save on hoodies, jackets, outerwear, hats and more..</p>
    <a class="readmore" href="#">shop collection</a>
</div>

CSS in /app/code/Ubertheme/UbContentSlider/view/frontend/web/css/module.less

/*You can add your custom CSS code here*/

.block-slide-home .item-desc .title {
    background: rgba(0,0,0,0.75);
    color: #fff;
    float: left;
    font-family: "Oswald",sans-serif;
    font-size: 40px;
    font-weight: bold;
    margin: 0 0 0 -5px;
    min-width: auto;
    padding: 13px 0 14px 10px;
    position: relative;
}

.block-slide-home .item-desc .desc {
    background: rgba(0,0,0,0.75) none repeat scroll 0 0;
    clear: both;
    color: #fff;
    float: left;
    font-size: 22px;
    margin: 5px 0 0 -5px;
    min-width: 535px;
    padding: 4px 0 6px 10px;
    position: relative;
}

.block-slide-home .item-desc .readmore {
    background: #00af4d;
    clear: both;
    color: #fff;
    float: left;
    font-family: "Oswald",sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 45px 0 0 -5px;
    padding: 10px 20px;
    text-transform: uppercase;
    opacity: .8;
}
#1
Profile photo of Frank 1460.00 $tone February 17, 2017
Public

Hi Gtc,
Glad that you sorted it out at your end.
In case you have additional question, please submit a ticket, I will help you out.
PS. Our team is off in the weekend, so we’re sorry for delay in case your ticket reaches us during this time.
Regards,
Frank

#2
Profile photo of gtc 30.00 $tone February 17, 2017
Public

Thanks Frank

Learning as I go. Magento 2: by far the most frustrating platform to develop anything onto LOL. First for me here. “CSS-deploy-CSS-deploy-CSS-deploy, and so-on and so-on. Jeez takes me nearly 20~30sec for each and every CSS modifications. In my case its trial and error so got to ‘deploy’ quite often. Nasty stuff I tell ya

That said, I may require some assistance but more or less to improve the way the product image is displayed in the main product page. Fine as it is but I see a few extra empty pixels that could be used in there for ‘best viewed’. We’ll see.

Thanks for the quick answer, enjoy the weekend!
ps. super happy here, that theme is really nice to get you started with, clean stuff. Thanks
 
Back on topic, and RE issue above:
Didn’t realized until a few hours ago that you guys already placed the css in the /app/design/frontend/Ubertheme/sportsgear/default/Ubertheme_UbContentSlider/web/css/source/_module.less
Therfore no need to mod the /app/code/Ubertheme/UbContentSlider/view/frontend/web/css/module.less
… just to set the record straight. In case another (noob) is reading this 😉

#3
Profile photo of Frank 1460.00 $tone February 20, 2017
Public

Hi Gtc,
Yes the learning curve is pretty high with Magento 2.
The CSS in /app/code/Ubertheme/UbContentSlider/view/frontend/web/css/module.less is style of module UbContentSlider. If you want to overide it, you add your custom style in /app/design/frontend/Ubertheme/sportsgear/default/Ubertheme_UbContentSlider/web/css/source/_module.less 
Regards,
Frank

#4

Please login or Register to Submit Answer

Written By

Comments