I would like to change the left footer store name text on my big cartel site which is the theme netizen.
I think I need to change this code but not sure how to replace it with a logo or different text.
<div class="footer-section footer-store-name">
{{ store.name }}
</div>
enter image description here
I am not sure what to do here
Related
I try to change the color of the font in just one section because I added a background picture and you cant read the white otherwise:
<section data-background="media/imagename.jpg">
<h2>blablabla</h2>
</section>
What should I add here to make "blablabla" look black?
Thanks!
Lala
It's more simple than you can think :
Inline Editing
<section data-background="media/imagename.jpg" *style="color:black"*>
<h2>blablabla</h2>
</section>
or, 2nd option with a .css file
<section id="namediv" data-background="media/imagename.jpg">
<h2>blablabla</h2>
</section>
.css:
#namediv
{
color:black
}
remember to include the .css file in your html/page. The first one is more fast but very rough to see and to use, the second one is more structured.
Remember that you have to adjust the font color based on your background image (blue background white color font etc.etc.)
Additionally, here is an example on how to change font colour when you use markdown for slides
<section data-markdown>
<script type="text/template">
<!-- .slide: style="color:white" -->
your text in markdown goes here...
_Doing is the best form of Saying_
</script>
</section>
The simplest way to do do this is with an inline style attribute, but you need to set it directly on the h2 element to override the theme, i.e. like this:
<section data-background="media/imagename.jpg" >
<h2 style="color:black">blablabla</h2>
</section>
I used animated input from W3 CSS. It takes 100% of the width when I click on it, but I only want it to take up 75% of the width when I click on it.
The code is:
<input class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
The property you are trying to change is controlled by a pseudo-class. You need to change the width of w3-animate-input:focus {width:75%;}. You must add this to your code. You can add this to
the head section of your page between <script> tag.
the w3.css file if you are hosting it on your website.
I'd like to place an icon inside a list-divider, but it seems that jQuery Mobile lets me apply data-icons to normal list items only and not to list items with data-role='list-divider' assigned.
Simply enough, I want the list-divider to display an info button for providing the user with more information about this category, which should look like so:
The point is, I'd like to place the info icon (with data-icon='info' or class='ui-icon-info') within the list-divider, while maintaining consistency in the overall style, i.e.:
The category is headed by a list-divider, and not by a list-item that is just styled to look like the list divider.
The icon is displayed on the right side, like the arrows in the list items below. The icon has to have the same style of appearance like the arrows, which means that it should not look like a button or have an extra frame around it.
The list-divider, or at least the icon, should be clickable, so the user is able to get the information about this category.
I'd preferably like to achieve this without any CSS customizations or JavaScript fiddling, using data-attributes only.
This is what I got (using jQuery Mobile 1.3.2):
List-item with data-icon:
<li data-theme='a' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Correct appearance of info-icon
Wrong appearance of category, because a normal list-item is used instead of a list-divider
Using a list-item with data-role='list-divider' assigned:
<li data-role='list-divider' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
No icon at all
Wrong title appearance and only text is hyperlinked instead of the whole list-item
List-divider with info-button inside:
<li data-role='list-divider'>Category: A<a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Info button has wrong appearance
The button has a border which I like to remove for consistency, so the icon is shown in its usual disc appearance. Removing data-role='button' doesn't help, because the button wouldn't be rendered at all and would therefore not show the icon.
The icon's position is not on the right side. I know it would be possible using data-iconpos='right', but I used this attribute for the icon-only (notext) layout already.
Category appearance is not pleasing, as the button increased its height. Even data-mini='true' didn't help.
I know there are a dozen of easy ways doing it the normal, less jQuery Mobile fixated way, but after 3 approaches, I'm eager to find out how this could be done with jQM.
This works, including the click, i just test it
<li data-role="list-divider">Test<div onclick='alert("Some info...");' class="ui-icon ui-icon-info" style="color:white;float:right"><div></li>
if the icon doesnt align with the rest of the icons add the below to the style
margin-right: -5px;
and change the pixels size to match the other icons
I want to add thumbnails to my list items as per the example here.
I've followed the instructions, eg:
To add thumbnails to the left of a list item, simply add an image
inside a list item as the first child element. The framework will
scale the image to 80 pixels square.
but the thumbnail image is appearing above my text, rather then beside it to the left.
My HTML is:
<li><img src="img/facebook.png"/><a id="facebook" href="#">Facebook</a></li>
Would anyone know the proper way of doing this?
Try to include your image inside a tag.
like that...
<li><a id="facebook" href="#"><img src="img/facebook.png"/><h2>Facebook</h2></a></li>
I'm only adding this here since it appears you can't format in comments. If you do "open source" on the page you mentioned, you will see the following:
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
Just pointing out it helps to check source on the samples you want to emulate.
I use JQuery layout feature to build skeleton of my app.
Layout has north-panel i.e header which can be hidden so that content area has more space.
Since header panel also contains icon bar, I only want icon bar to be visible when header is hidden.
Is there a way to achieve this by setting any property while creating layout using UI Layout.
Here is the image of layout where on hiding header should still show icons but only hide blue bar at the top.
Regards,
Satya
If I understand you correctly, the markup you have would like something like this:
<div id="north-panel">
<div id="header">
<div id="icons"></div>
</div>
</div>
If this is the case, maybe the following may help:
Can you seperate the icons panel to be a direct child of the north-panel? If you can, you could just hide the header and the icons panel would still be visible.
<div id="north-panel">
<div id="header"></div>
<div id="icons"></div>
</div>
Otherwise, hiding an element without hiding its children is not possible (as far as I know). What you could try too, is to make the header have the same dimensions as the icons panel and hide anything else inside the header. This would somehow fake the effect you wanted.