The part of the page which displays the card logo is from the the following HTML. When searching through the project folder, I don't find this anywhere. I tried to look this up in the Edit Code section of the Shopify admin, but didn't find. All I need to do is replace the default logos with a single custom logo that I have. The image following the code shows that I part I am looking for the code for.
<div id="trust-badge-content-div" class="trust-badge-preview trust-badge-product" data-trustbadge-specificity="1" data-hc-insertion-order="0" style="box-sizing: border-box; text-align: center; width: 100%; margin: 15px 0px;"><div class="tb-text-div" style="display: inline-block; font-size: 12px;"><div class="tb-text" style="color: rgb(0, 0, 0); font-size: 15px; font-weight: normal; text-align: center;">Secure checkout with major credit cards including these and more.</div><div class="tb-badge-div"><div class="tb-badge" style="width: 65px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=122-american-express" alt="American Express" style="width: 50px; height: 50px;"></div><div class="tb-badge" style="width: 65px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=120-discover" alt="Discover" style="width: 50px; height: 50px;"></div><div class="tb-badge" style="width: 65px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=129-visa" alt="Visa" style="width: 50px; height: 50px;"></div><div class="tb-badge" style="width: 65px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=108-master-card-1" alt="MasterCard" style="width: 50px; height: 50px;"></div></div></div></div>
To better help you, please share the name of the theme you use.
In general, the option to show or hide cards is on the footer or on the theme settings. Go to theme / customize and search for the option to hide credit cards in these two places.
UPDATE: on theme prestige the option is on footer.
after find the option on customize (footer section) go to edit code
sections/footer (around line 156 depending your previous customizetions) you'll find this:
{%- if section.settings.show_payment_methods -%}
<!-- change the content of this if -->
{%- capture payment_methods -%}
{%- for type in shop.enabled_payment_types -%}
<li class="HorizontalList__Item">{{ type | payment_type_svg_tag }}</li>
{%- endfor -%}
{%- endcapture -%}
{%- if payment_methods != blank -%}
<ul class="Footer__PaymentList HorizontalList">
{{ payment_methods }}
</ul>
{%- endif -%}
{%- endif -%}
Related
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
I have a website I am creating for a school project. I am very new to html and css. I have created div containers for the different sections of my pages. On my index page, I have 5 containers including the header and footer.
The containers are working everywhere except in 1 location where I am floating images. For some reason, the box is shrink-wrapping under the 3 images. I thought by placing a position:relative in the .container css rule, it would behave like it is with paragraphs and other elements. I would like that container to surround the pictures just like it is with the other boxes on the index page.
Here is the html for that specific container that is not working:
<div class="container">
<article>
<h2>Meet the Staff:</h2>
<div class="gallery">
<figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
<figcaption>Mary the Librarian</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
<figcaption>Ruth the Assistant</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
<figcaption>Esther the Research Librarian</figcaption>
</figure>
</div>
</article>
</div>
And here is the css:
.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;
}
figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;
}
Here is the so you can see what is happening: http://www.ta5zc.com/
Thanks for any help you can provide. I can't seem to figure out what is wrong.
Embarrassing, but I figured it out. The container is acting just like it is supposed to. There was no elements below the images, so there was nothing to stay in place. Therefore, when I floated the images, the box moved up the page like it was supposed to. Like I said, I'm new at this ;-)
Dear fellow stackoverflowers,
I'm having a peculiar problem I can't seem to find the solution for.
I'm trying to apply the width of the largest div to the smaller divs, so that they appear equal in width, through flexboxing. Unfortunately, all the solutions so far have been futile efforts. Do you have any idea why the different divs in the example I've linked to won't display the same width as the largest element? I know the boxes get their width from the content, but I just can't seem to make them behave the way I want.
HTML
<section id="contact" class="wrapper bgfixed">
<div>
<h1>Contact</h1>
<div id="contactholder">
<a href="#">
<div>
<h1 class="icon-mail"></h1>
<h2>EMAIL</h2>
<p>someonesprofessionalemail#gmail.com</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-old-phone"></h1>
<h2>TELEPHONE</h2>
<p>39 88 49 92 91</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-facebook2"></h1>
<h2>FACEBOOK</h2>
<p>www.facebooooooooooooooooooook.com/snowman</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-soundcloud"></h1>
<h2>LOREM IPSUM</h2>
<p>www.loremipsumyesyesyesblahblabhlabh.com</p>
</div>
</a>
</div>
</div>
</section>
CSS
a{text-decoration: none;}
#contact
{
width: 100%;
height: 82vh;
color: whitesmoke;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #34495e;
}
#contactholder
{
display: flex;
justify-content: space-between;
font-size: 80%;
}
#contactholder div
{
flex: 1;
flex-grow: 1;
font-size: 0.5rem;
}
#contactholder div h1
{
padding: 3rem;
letter-spacing: 0;
display: inline-block;
background-image: linear-gradient(white, 1%, #3498db);
border-radius: 100rem;
box-shadow: 0 1px 1px grey;
transition: 0.3s;
margin-bottom: -0.5rem;
}
#contactholder a:hover h1
{
background-image: linear-gradient(white, 1%, #00A4EB);
text-shadow: 0 1px 1px;
}
Hoping for some brilliant minds!
Best wishes,
Lodott1
I am create a blog using blogger.com.When I click on a label (Or tag ) I get back to the homepage, while the relevant label posts should load. Ideally I want to load max posts 20 per page and pagination to see more.
My code is,
<b:widget id='HTML44' locked='false' title='Label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:blog.searchLabel != ""'>
<h2 class='title' id='tit_h2'><img border='0' src='http://3.bp.blogspot.com/-uqDJqtNSkfY/UyElenxHsDI/AAAAAAAAAGk/4QaOO27tY0w/s1600/Heading+1.png' style='margin-top:-2px; float:left; margin-right:10px;'/><data:blog.searchLabel/></h2>
<div class='eggTray'>
<script src='http://helplogger.googlecode.com/svn/trunk/listbadge.js'>{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://www.foxbet.gr/feeds/posts/default/-/<data:blog.searchLabel/>"},
"hideHeader":"false","height":"auto","count": 20 }</script>
<div class='ycdr' style='font-family: arial, sans-serif; font-size: 9px;'><a href='http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html' target='_blank' title='Grab this widget'>Recent Posts Thumbnails</a> <a href='http://helplogger.blogspot.com/' target='_blank'>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type='text/css'>
.ybi{display:block;}
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {display:none; background:transparent url(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
.pipesThumbnail{width: 70px !important; height: 50px !important;}
.pipesThumbnail img{width: 100% !important; height: auto !important;}
</style>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if> </b:if></b:if>
</b:includable>
</b:widget>
Any one please help me
Considering you have a pagination script in your template.
Now For pagination scripts to work on your labels aswell, you need to specify parameters in URL.
Example:
http://yourblog.blogspot.com/search/label/posts?&max-results=20
here posts will be replaced by your label name.
& parameter will enable pagination on your labels aswell.
max-results=20 will load 20 posts maximum (this can be changed by your choice)
Hope this helps.
I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?