I'm trying to customize the facebook like box, and I need to alter the image size slightly. I've been reading around and it seems to be difficult. Does anyone know a way?
You can change the css by adding your own style for
.connect_widget .connect_widget_image{
width: ##px !important;
height: ##px !important;
}
and also
.connect_widget .connect_widget_sample_connection{
width: ##px !important;
}
Did not try but that how I would do it.
Although I think it's not very recommended to change CSS of like button...
Related
I wanted to give only vertical and horizontal space between grid cell. Is there any attribute to set space between grid cell?
I think something like this should work:
<ion-grid class="grid"></ion-grid>
and the the css:
.grid{
margin: 5px;
}
And I'm pretty sure that styles are going to be applied too by only using a selector in css file:
ion-grid ion-row, ion-col{
margin: 5px;
}
Alternatively you can use padding instead of margin
you can use the padding that ionic provide or what i will do to have more control is the following:
on the page.scss file
my-page ion-col{
margin: 5px;
}
This is likely a very simple question that I am brainfarting on - Is there a way to have my shop with the Luna theme show an actual numerical quantity available rather than the simple bars?
I'm certain I have seen this done somewhere but I can't find an example of the code anywhere.
To show the quantity in your inventory bar area, head to Customize Design > Advanced > CSS and add this at the very bottom:
#product_inventory .bar span em {
display: block;
}
I know this question is old but I have changed the following in the Luna theme.css file to provide this functionality as the first answer no longer works.
Edit the css to replace display: none with display: block
.inventory-bars .inventory-label {
color: {{ theme.secondary_text_color }};
font-size: 12px;
display: block;
position: absolute;
right: 0;
top: -16px;
}
Numerical quality shown
[bigcartel]
I have a fixed menu, I always want it at the top of my page:
.fixed-menu{
position: fixed;
height: 75px;
width: 100%;
background: tomato;
}
I also want an off canvas menu.
The problem I am having is that when you open the off canvas menu, the fixed menu is no longer fixed.
After playing with the issue, it's something to do with 3d transform, but I cannot find a fix.
Here is a JSFiddle
If you do it this way, the page is essentially locked when the menu is open http://codepen.io/rafibomb/pen/hApKk
Basically wrapping the content and making it overflowY: scroll;
article {
overflow-y: auto;
}
I am quite new to zurb, infact just found it yesterday. I am liking it so far, but I can't seem to figure out something simple. I can do this using css but I wanted to know if there is another out-of-the-box approach to this.
I want to be able to set the width and height of a text area. The way it is on this fiddle.
http://jsfiddle.net/bwZbh/
`<textarea id="content" placeholder="Nothing yet!!" class="large-12" style="margin: 0px -275.672px 0px 0px; height: 319px; width: 580px;"
it's a small bug in foundation
open up your css, and add the following
textarea {
height: auto;
}
then you will be able to style your textarea as you wish, and rows will work as well
example
<textarea rows="5" name="textareaname" cols="50"></textarea>
UPDATE:
This bug is now fixed in Foundation 5
i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)
Picture:
here is my code for how it looks atm:
.jq_thumbnails {
background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
overflow: auto;
height: 100%;
}
Is it possible to achieve this effect easily? I thought of making ifequal tag that would check the length of thumbnails list and use a certain background picture accordingly, but maybe it is possible to achieve this using html/css only?
You can leverage CSS3 Multiple Background Images:
.jq_thumbnails {
background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
background-position: 0 0, 0 bottom;
}
Set the background-repeat property to suit your particular scenario:
background-repeat: repeat-x, repeat-x;
This is supported in all current versions of the major browsers:
Of course you can make an outer div and an inner one that covers the background, so you can repeat-y the background ;)