I am styling a Shopify site for the first and using the Minimalist theme as a base. I want to style the shopify-payment-button (But it now) button but have not been able to. I noticed looking that the page source code there is:
<style id="shopify-dynamic-checkout">
.shopify-payment-button__button--hidden {
visibility: hidden;
}
.shopify-payment-button__button {
border-radius: 4px;
border: none;
box-shadow: 0 0 0 0 transparent;
color: white;
cursor: pointer;
display: block;
font-size: 1em;
font-weight: 500;
line-height: 1;
text-align: center;
width: 100%;
transition: background 0.2s ease-in-out;
}
//etc, etc
being injected into the <head> which is overriding my styles. I can't find where this comes from to remove it. Would anyone know how?
Shopify injects styles and js for some elements on site inside {{ content_for_header }}, which you will find in theme.liquid file.
This tag contains default shopify files as well as files for some integrations and apps. For example if you install facebook pixel through shopify, the code for it will go to {{ content_for_header }}
It is not possible to control what goes to this tag directly. If you just need to change styling then I recommend to just overwrite styles, in worst case if you need to, use"!important" tag in css
Related
I have documents with long titles and would like them to appear with its full name in the tabbar in qpdfview.
I researched a lot and found that QT has the functionality to allow stylesheet. I looked in the documentation and found no propriety that allows word wrap for title names of the pdf files.
The stylesheet are located in ~/.config/qpdfview/qpdfview.conf, under [mainWindow] I put
styleSheet="QTabBar::tab { font-size: 12px; margin: 0px; padding: 0px; border: 1px; max-width: 120px; }\nQTabBar::tab:selected, QTabBar::tab:hover { font-size: 12px; background-color: coral; min-height: 24px; titlebar-show-tooltips-on-buttons: true; text-align: right; }"
I'm looking for something that is impossible? Then I have to try to change what are shown in the label of the tabbar.
I am having trouble with this Github package for vuejs pagination. It seem to work on bootstrap 3 but when I use bootstrap 4, it just doesn't work. My problem basically is that bootstrap 4 doesn't style the list item correctly.
I put 'pagination' class on :container-class and it makes the list inline, but not style it like what a normal bootstrap pagination should look. It's just plain list that is inline. I even tried overriding it and putting my own 'mypagination' class on :container-class but still doesn't style it properly. Thanks in advance to you.
//VueJs Paginate code
<paginate
:page-count="20"
:click-handler="functionName"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'mypagination'">
</paginate>
//My style code
<style scoped>
.mypagination{
list-style-type: none;
}
.mypagination li {
display: inline !important;
}
.mypagination > li > a,
.mypagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
</style>
You have to add the following properties for bootstrap 4:
<paginate
:page-count="20"
:click-handler="clickCallback"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link'"
:prev-class="'page-item'"
:next-class="'page-item'"
:prev-link-class="'page-link'"
:next-link-class="'page-link'"
:active-class="'active'">
</paginate>
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
Is there any way to get all attributes of dom element in DOJO (not specific one like domAttr.get("nodeId", "foo")).
<div style="border-width: 2px; border-color: #000000; border-radius: 0px; -moz-border-radius: 0px; height: 100px; background-color: #FFFFFF; -webkit-border-radius: 0px; position: absolute; z-index: 900; width: 193px; left: 57px; top: 106px;" position="absolute" height="100px" width="193px" background-color="#FFFFFF" border-color="#000000" border-width="2px" z-index="900" -webkit-border-radius="0px" -moz-border-radius="0px" border-radius="0px" left="57px" top="106px"></div>
I want to read all attributes in div tag.
Thanks in advance.
I'm not sure if Dojo has a wrapper for this (I've done a brief search of the 1.8.3 source), but you can use Node.attributes.
Dojo does use Node.attributes in places like here in parser.js. Note the special handling of IE8 and IE6-7, to avoid falling foul of the same traps.
I have a dashboard in which I'd like a scrolling ticker. (We'll know if the UI sucks or not once it's been running on the wall for a while.) Because this is a specific purpose dashboard, we can assume a recent WebKit in our markup and use even the latest CSS3 markup if it's implemented.
This is some exemplary markup, but we're free to change it as needed, although I'd prefer to keep it relatively semantic if possible:
<div class="ticker">
<div class="itemDiv">
<img src="x">
<div class="itemBodyDiv">
<span>Upper Box</span>
<span>Lorem ipsum dolor sit amet</span>
<span>Lower Box has longer text</span>
</div>
</div>
</div>
This is the layout I'd like to achieve:
The outer solid black line is a div. The dashed line is a div that represents an individual item in the ticker. Items will scroll right-to-left using -webkit-marquee. The main body of the ticker item is the lorem ipsum text, which needs overflow-x set to cause the marquee behavior. The main body should be text-align: middle.
The problem I'm having is in finding suitable CSS markup to describe the position of the Upper Box and Lower Box. I've tried several permutations of display: inline and inline-block that didn't work. They either ruined the marquee behavior or moved the main body over. It seems that they need to be pulled out of the normal box model, but can't be absolute since they wouldn't have the marquee behavior. It seems like there should be some sort of relative positioning that is outside of the box model flow that doesn't preserve normal flow spacing that would handle cases like this, but I'm not finding it amid the many drafts of the many revisions of CSS and certainly not among the cargo cult of Google search results.
By request, this is my current non-working CSS at the state of my last experiment:
.itemDiv {
display: inline;
vertical-align: middle;
}
.itemDiv > img {
margin: 10px 10px 10px 30px;
vertical-align: middle;
height: 48px;
width: 48px;
/* border: 1px solid red; */
}
.itemBodyDiv {
display: inline;
vertical-align: middle;
}
.itemDiv span:nth-child(1) {
font-size: small;
clear:left;
vertical-align: top;
color: green;
}
.itemDiv span:nth-child(2) {
font-size: x-large;
vertical-align: middle;
color: white;
}
.itemDiv span:nth-child(3) {
font-size: smaller;
vertical-align: bottom;
color: gray;
}
Any suggestions?
You should wrap the entire scrolling message in a a div with its position set to relative. That way, you're free to absolutely position elements inside of the message absolutely while not breaking the marquee behavior:
.message
{
position: relative;
}
.upper-box
{
position: absolute;
top: 5px;
left: 10px;
}
.lower-box
{
position: absolute;
bottom: 5px;
left: 10px;
}