Hjelp til endring i HTML på virb.com

tobbelobben · 5. mars 2014

Hei

Jeg driver å lager en hjemmeside og funnet ut at å kjøpe domene gjennom one.com og designe siden på virb.com ser ut til å funke for meg.

Problemet er at jeg vil finpusse litt på designet som går i å endre i master CSS eller master HTML. Jeg er helt ny på dette og lurte på om det går ann å få litt hjelp til dette ettersom kundeservicen på virb ikke hadde support for den type hjelp.

Hvis dette går vil jeg ha hjelp til følgende:

Endre siden slik at en tekstkolonne blir borte. Slik at teksten på siden går over hele den svarte delen av siden. Se vedlegg.

Andre er at jeg vil undersider som ikke vises i menyen. Sånn at jeg lager en side som blir linka til i tekst og bilde på en av sidene jeg lager.

Hvis dette er mulig og enkelt vil jeg gjerne ha hjelp til dette og må vite om jeg skal legge ut CSS eller HTML. Eller om det er noen andre enkle web-editors som ser like bra ut som de på virb og kan endre slike ting.

Takker for svar.

cronbach alpha · 5. mars 2014

No har ikke jeg vært borti virb eller andre forenklings tjenester. Men sann som jeg kan se det har de en rekke maler som du kan benytte, men der du skal ha muligheten til å endre malene selv.

Om du har tilgang til å endre HTML og CSS, vil fjerning av det du har markert med et kryss mest sannsynlig ligge i HTML i et div element med en id.

Jeg har ikke sett koden til din HTML og CSS, men har laget et raskt eksempel:

http://jsfiddle.net/54HGd/

Tar du for eksempel å fjerner div id="contentright" forsvinner dette vinduet.

Om feltet med det innholdet du ønsker å beholde ikke justeres automatisk (avhengig av hvordan det er kodet) kan du endre på dette i CSS.

Dan-Levi · 5. mars 2014

Hei tobbelobben!

Dette skal ikke være hokus pokus, men jeg trenger å se kode for å hjelpe deg! Om du har mulighet til å legge ved html og css filene kan jeg se på det.

tobbelobben · 5. mars 2014

HTML

<!doctype html>

<html class="no-js" lang="en">

<head>

<title>{{^page.is_homepage}}{{page.title}} - {{/page.is_homepage}}{{site.title}}</title>

{{{site.meta}}}

<!-- CSS

================================================== -->

{{{customize.css.basic}}}

{{{theme.css}}}

{{{customize.css.advanced}}}

<!-- IE

================================================== -->

<!--[if lte IE 8]>

<![endif]-->

{{{site.scripts.libs}}}

{{{site.scripts.head}}}

</head>

<h1><a href="{{site.url}}">{{site.title}}</a></h1>

{{#site.subtitle}}<h2 class="subheader">{{{site.subtitle}}}</h2>{{/site.subtitle}}

</div>

</span>

<span>{{title}}</span>

<ul>

<li class="{{#current}}current{{/current}} page page_in_a_section"><a href="{{url}}" {{#target}}target="{{target}}"{{/target}}>{{title}}</a></li>

</ul>

</li>

<li class="{{#current}}current{{/current}} page page_title"><a href="{{url}}" {{#target}}target="{{target}}"{{/target}}>{{title}}</a></li>

</li>

</ul>

</nav>

</header>

</div>

<!-- Primary Page Layout

================================================== -->

<h1 id="page-title">Enter password</h1>

<h3>

</h3>

<p>Please enter the password to view this page.</p>

</div>

</form>

</section>

<h1 id="page-title">Enter password</h1>

<h3>

</h3>

<p>Please enter the password to view this page.</p>

</div>

</form>

</section>

<h1 id="page-title">Oops, there was an error.</h1>

<p>The page you're looking for can't be found. Double-check your URL, or just go <a href="{{site.url}}" title="home">home</a>.</p>

</section>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{{body}}}

</section>

<li>

<a href="#{{slug}}" title="{{title}}">{{title}}</a>

</li>

</ul>

{{#title}}<h2 class="item-title">{{title}}</h2>{{/title}}

{{#price}}<p class="price">{{price}}</p>{{/price}}

</div>

{{#description}}<div class="description content-editor">{{{description}}}</div>{{/description}}

<h2 class="section-title"><a name="{{slug}}"></a>{{title}}</h2>

{{#title}}<h2 class="item-title">{{title}}</h2>{{/title}}

{{#price}}<p class="price">{{price}}</p>{{/price}}

</div>

{{#description}}<div class="description content-editor">{{{description}}}</div>{{/description}}

</li>

</ul>

</li>

</ul>

</div>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{{body}}}

</section>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{{body}}}

</section>

{{{sharing}}}

</div>

</section>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{{map}}}

</div>

{{{body}}}

</div>

<li class="contact-item {{type}}">{{#type_title}}<span class="type">{{type_title}} </span>{{/type_title}}<span class="value">{{{formatted}}}</span></li>

</ul>

<address>{{{address}}}</address>

</section>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{{body}}}

</section>

<li>

<span class="image">{{{media}}}</span>

{{#title}}<h2 class="listing-title">{{title}}</h2>{{/title}}

{{#description}}<div class="description">{{{description}}}</div>{{/description}}

</span>

{{#title}}<h2 class="listing-title">{{title}}</h2>{{/title}}

{{#description}}<div class="description">{{{description}}}</div>{{/description}}

</li>

</ul>

</div>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

<ul>

<span class="mon">{{date => date.abbr_month}}</span>

</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>

</header>

{{{body}}}

</div>

<span class="mon">{{date => date.abbr_month}}</span>

</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>

</header>

{{{body}}}

</section>

<span class="mon">{{date => date.abbr_month}}</span>

</time>

</header>

<span>{{{source}}}</span>

</footer>

</blockquote>

</section>

<span class="mon">{{date => date.abbr_month}}</span>

</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}{{^title}}{{url}}{{/title}}</a></h1>

</header>

{{{body}}}

</section>

<span class="mon">{{date => date.abbr_month}}</span>

</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>

</header>

{{{player.embed_code}}}

{{{body}}}

</section>

<span class="mon">{{date => date.abbr_month}}</span>

</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>

</header>

{{{player.resize_500.embed_code}}}

</div>

{{{body}}}

</section>

<span class="mon">{{date => date.abbr_month}}</span>

</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>

</header>

<ul>

<li>

<span class="phrase">{{{phrase}}}</span>

</li>

</ul>

</section>

<aside>

<a href="{{permalink}}#notes" class="comments" data-icon="☁">{{note_count}} comments</a>

<a href="http://www.tumblr.com/reblog/{{id}}/{{reblog_key}}" class="reblog" target="_blank" data-icon="⟲">Reblog</a>

</div>

{{{sharing}}}

</div>

</aside>

{{{comments}}}

</article>

</li>

</ul>

<a class="older" href="{{url}}" title="See older posts">← Older</a>

<a class="newer" href="{{url}}" title="See newer posts">Newer →</a>

</div>

</section>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}} class="blog-title"><a href="{{page.url}}" title="back to all posts">{{page.title}}</a></h1>

{{^category}}<span class="category">Category</span>{{/category}}

{{#category}}<span class="category">{{category}}</span>{{/category}}

</div>

</select>

</div>

{{#subscribe}}<a class="subscribe" data-icon="R" href="{{page.url}}?rss">Subscribe</a>{{/subscribe}}

<a href="{{page.url}}" class="back">Back to all posts</a>

<span class="tag-filtered">Currently showing posts tagged <em>{{tag}}</em></span>

</p>

</div>

<ul>

<span class="mon">{{created => date.abbr_month}}</span>

<span class="day">{{created => date.day}}</span>

</time>

{{^audio}}<h1><a href="{{url}}" title="{{title}}" {{#target}}target="{{target}}"{{/target}}>{{title}}</a></h1>{{/audio}}

</header>

{{{body}}}

</div>

{{{body}}}

</section>

<span>{{{source}}}</span>

</footer>

</blockquote>

</section>

{{{body}}}

</section>

<ol>

<a href="#" class="play-pause" title="play/pause" data-icon="▶" data-icon-pause="ⅱ">Play/Pause</a>

</div>

<h2>{{title}}</h2>

</div>

</span>

</audio>

</li>

</ol>

</article>

{{{body}}}

</section>

{{{embed}}}

</div>

{{{body}}}

</section>

<p><span>Category:</span></p>

<li><a href="{{page.url}}/category/{{title}}" title="title">{{title}}</a></li>

</ul>

</div>

</ul>

</div>

</footer>

{{^post_view}}{{#comments_on}}<a href="{{url}}#comments" class="comments" data-icon="☁">Comments</a>{{/comments_on}}{{/post_view}}

{{{sharing}}}

</div>

{{{comments}}}

</article>

</li>

</ul>

<a class="older" href="{{url}}" title="See older posts">← Older</a>

<a class="newer" href="{{url}}" title="See newer posts">Newer →</a>

</div>

</section>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

<a href="#" class="back-to-slideshow" title="Back to Thumbnails" data-icon="∷">Back to Thumbnails</a>

</div>

<p class="count"><span class="current">1</span><span class="divider">/</span><span class="total">{{total_count}}</span></p>

</div>

<ul>

{{{embed}}}

</div>

<h2>

{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}

{{#url}}</a>{{/url}}

</h2>

{{#body}}<p>{{{body}}}</p>{{/body}}

</div>

</li>

</ul>

</div>

</a>

</li>

</ul>

{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}

{{{embed}}}

</div>

{{#title}}<h2>{{title}}</h2>{{/title}}

{{#body}}<p>{{{body}}}</p>{{/body}}

</div>

{{#url}}</a>{{/url}}

</li>

</ul>

{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}

{{{embed}}}

</div>

{{#title}}<h2>{{title}}</h2>{{/title}}

{{#body}}<p>{{{body}}}</p>{{/body}}

</div>

{{#url}}</a>{{/url}}

</div>

</li>

</ul>

</div>

{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}

{{#title}}<h2>{{title}}</h2>{{/title}}

{{#body}}<p>{{{body}}}</p>{{/body}}

{{#likes}}<p data-icon="♥">{{{likes}}}</p>{{/likes}}

{{#views}}<p data-icon="I">{{{views}}}</p>{{/views}}

{{#comments}}<p data-icon="☁">{{{comments}}}</p>{{/comments}}

</div>

{{#url}}</a>{{/url}}

</li>

</ul>

{{{body}}}

</section>

{{{sharing}}}

</div>

</section>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{{embed}}}

</div>

<ol>

<a href="#" class="play-pause" title="play/pause" data-icon="▶" data-icon-pause="ⅱ">Play/Pause</a>

</div>

<p class="title">{{title}}</p>

{{#downloadable}}<a class="download" href="{{mp3_url}}" title="download track" data-icon="↓">Download</a>{{/downloadable}}

</div>

</span>

</audio>

</li>

</ol>

</article>

</section>

{{{body}}}

</section>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{#has_image}}<img src="{{image_url}}" alt="{{title}}">{{/has_image}}

<h2>{{title}}</h2>

<h3>{{{sub_title}}}</h3>

</div>

</a>

</li>

</ul>

</section>

{{{body}}}

</section>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

{{{body}}}

</section>

<ul>

<li>

<span class="mon">{{start_time => date.abbr_month}}</span>

<span class="day">{{start_time => date.day}}</span>

</div>

<h2 class="title">{{title}}</h2>

<span class="address">{{location.title}}</span>

<span class="timeframe">{{start_time => date.time}}{{#end_time}} - {{end_time => date.time}}{{/end_time}}</span>

</div>

<a class="see-details" title="See details for {{title}}" href="{{permalink}}">See Details →</a>

</div>

</li>

</ul>

</section>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{{page.title}}}</h1>

<a href="?category={{slug}}" title="{{{title}}}">{{{title}}}</a>

</li>

</ul>

<h2>{{{title}}}</h2>

</div>

<p class="price">Coming Soon</p>

<h2>{{{title}}}</h2>

</div>

<h2>{{{title}}}</h2>

</div>

<p class="price"><span>{{currency.sign}}</span>{{price}}</p>

</a>

</li>

</ul>

{{#pagination}}{{{pagination}}}{{/pagination}}

</section>

{{{body}}}

</section>

{{{sharing}}}

</div>

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{{page.title}}}</h1>

<h1>{{{product.title}}}

<p class="price coming-soon">Coming Soon</p>

<p class="price">{{currency.sign}}<span id="price">{{product.price}}</span></p>

</h1>

</div>

{{{product.body}}}

</div>

</select>

</div>

<input class="add-to-cart" type="button"

data-title="{{product.title}}"

data-id="{{product.id}}"

data-price="{{product.price}}"

data-thumb="{{product.main_image.crop_75x75}}"

data-currency="{{currency.code}}" value="Add To Cart">

<a title="Back to Product Listing" href="{{store.url}}" class="back-to-listing">← Back to Product Listing</a>

{{{sharing}}}

</div>

</ul>

</div>

</section>

</ul>

<p>Your cart is currently empty! Why don't you <a href="{{store.url}}">start shopping?</a></p>

</div>

<p class="label">Your subtotal is</p>

</div>

<a title="Proceed to Checkout" class="checkout" href="#">Proceed to Checkout</a>

<a title="Continue Shopping" class="continue-shopping" href="{{store.url}}">← Continue Shopping</a>

</div>

</section>

</div>

<h2 class="widget-title" {{#hide_title}}style="display:none;"{{/hide_title}}>{{{title}}}</h2>

{{{body}}}

</article>

</section>

{{{site.footer}}}

</footer>

</div>

</div>

</div>

<!-- JS

================================================== -->

{{{site.scripts.body}}}

<!-- End Document

================================================== -->

</body>

</html>

CSS

{{{virb.fonts.themes}}}

{{{customize.fonts.font_face}}}

/* Icon Fonts */

@font-face {

font-family: 'spotlight-regular';

src: url('http://{{virb.media_domain}}/_assets/_fonts/_icons/spotlight-regular.eot');

src: url('http://{{virb.media_domain}}/_assets/_fonts/_icons/spotlight-regular.eot?#iefix') format('embedded-opentype'),

url('http://{{virb.media_domain}}/_assets/_fonts/_icons/spotlight-regular.woff') format('woff'),

url('http://{{virb.media_domain}}/_assets/_fonts/_icons/spotlight-regular.ttf') format('truetype'),

url('http://{{virb.media_domain}}/_assets/_fonts/_icons/spotlight-regular.svg#spotlight-regular') format('svg');

font-weight: normal;

font-style: normal;

}

/* BACKGROUND IMAGES */

body {

background-image: url({{{customize.images.background.url}}});

/* Tile */

background-position: top left;

background-repeat: repeat;

/* Repeat Horizontal */

background-position: top left;

background-repeat: repeat-x;

/* Repeat Vertical */

background-position: top left;

background-repeat: repeat-y;

/* Fullscreen */

background-position: center center;

background-repeat: no-repeat;

background-attachment: fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

/* COLORS */

/* Body */

body {

background-color: {{{customize.colors.background_body}}};

}

/* Content Area */

.wrapper,

#menu li.section ul,

.sharing ul,

#menu li.section ul,

#ui-datepicker-div .ui-datepicker-calendar:before {

background-color: {{{customize.colors.background_content}}};

}

.opentable form#OT_form .OT_wrapper ul.OT_list li.OT_submit a.OT_Find_a_Table,

.opentable li.OT_navListItem a.OT_navLink:hover,

.opentable li.OT_navListItem a.OT_navLink.selected,

.opentable li.OT_navListItem a.OT_navLink.selected:hover,

#datepicker table.ui-datepicker-calendar td a.ui-state-active {

color: {{{customize.colors.background_body}}};

color: {{{customize.colors.background_content}}};

color: {{{customize.colors.background_content_area}}};

}

#menu li > a {

border-color: {{{customize.colors.background_content}}};

}

/* Site Name */

#site-header .logo h1 a {

color: {{{customize.colors.site_name}}};

}

/* Subtitle */

#site-header .logo h2 {

color: {{{customize.colors.subtitle}}};

}

/* Navigation */

#menu li a,

#menu li.section span,

#site-header nav#main-nav ul li.section:after {

color: {{{customize.colors.nav}}};

}

/* Navigation Rollover */

#menu li a:hover,

.toggle a,

#menu li.section:hover span,

#menu li.section ul li.current a,

#site-header nav#main-nav ul li.section:hover:after {

color: {{{customize.colors.nav_rollover}}};

}

/* Primary */

.content-editor,

.blogs-content,

.events .event-info,

footer time,

.audio-player li.playing .info .title,

.audio-player li.playing .info .time,

.large-gallery .details p,

.product-specifics .product-title-price .price,

table.ui-datepicker-calendar td a,

table.ui-datepicker-calendar td a:hover,

table.ui-datepicker-calendar td a.ui-state-highlight,

table.ui-datepicker-calendar td a.ui-state-default,

table.ui-datepicker-calendar td a.ui-state-hover,

table.ui-datepicker-calendar td.ui-state-disabled span.ui-state-default,

table.ui-datepicker-calendar .ui-datepicker-calendar thead tr th,

ul.OT_list li:after,

#datepicker .ui-widget-header,

#ui-datepicker-div .ui-widget-header,

ul.OT_list li input,

.ui-datepicker-calendar thead tr th span,

#main-content .grid-gallery .large-gallery li .details .meta a {

color: {{{customize.colors.primary}}};

}

.tags-categories p,

.tags-categories ul,

.product-description,

.index h2,

.index h3,

#blog > ul > li header h1 a,

.items-in-cart li,

.items-in-cart li .price .currency,

.widgets,

#site-footer,

#main-content #store-listing .categories li a,

.menu .section-titles li a,

#main-content .menu ul.menu-list li p.description {

color: {{{customize.colors.primary}}};

}

#store-cart .total,

#cart-empty-message {

color: {{{customize.colors.primary}}};

}

/* Secondary */

.toggle,

#cart-empty-message,

.index li.no-image,

#slider .slider-track-x,

.audio-player .length,

#site-header nav#main-nav ul li a,

#site-header nav#main-nav ul li.section span,

#store-detail .options {

background-color: {{{customize.colors.secondary}}};

}

/* Accent */

#handle,

.navigation,

article header time,

.category-dropdown,

.index .price,

.audio-player .controls a,

.events .date,

.delete,

.sharing ul {

background-color: {{{customize.colors.accent}}};

}

#store-cart .total .amount,

.items-in-cart li .price,

#main-content .menu ul.menu-list li p.price,

.ui-datepicker .ui-datepicker-header,

.ui-datepicker .ui-datepicker-header thead,

.ui-datepicker .ui-datepicker-calendar,

.OT_wrapper ul.OT_list input,

#ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-active,

#datepicker table.ui-datepicker-calendar td a.ui-state-active {

color: {{{customize.colors.accent}}};

}

/* Accent Text */

.navigation-controls a,

.navigation .count,

article header time,

.category-dropdown,

.index .price a,

.index .price,

.events .date,

.audio-player .controls a,

.download,

.delete,

.delete:hover {

color: {{{customize.colors.accent_text}}};

}

/* Page Titles */

#page-title,

#page-title a,

.audio-player .info {

color: {{{customize.colors.page_titles}}};

}

/* Titles */

.content-editor h1,

.content-editor h2,

.content-editor h3,

.content-editor h4,

.content-editor h5,

.content-editor h6,

blockquote,

cite,

.widgets h2,

#main-content .contact .contact-item .type,

#main-content .contact ul.contact-info li.contact-item.name,

#main-content .menu ul.menu-list h2.item-title {

color: {{{customize.colors.titles}}};

}

.large-gallery .details h2,

.events .event-info .title,

.product-specifics .product-title-price h1 {

color: {{{customize.colors.titles}}};

}

/* Link */

a,

#menu li.current a,

.toggle a,

#blog > ul > li header h1 a,

.index .titles h2,

#store-detail .back-to-listing,

.sharing .share-label,

.navigation-controls a:hover,

.audio-player ol li.playing h2,

#main-content .menu ul.menu-list li h2.section-title,

#main-content .menu ul.menu-list li ul.sub-items,

.ui-datepicker .ui-datepicker-header .ui-icon,

table.ui-datepicker-calendar a.ui-state-default:hover,

#main-content .grid-gallery .large-gallery li .details .meta a:hover {

color: {{{customize.colors.link}}};

}

.opentable form#OT_form .OT_wrapper ul.OT_list li.OT_submit a.OT_Find_a_Table:hover,

#datepicker table.ui-datepicker-calendar td a.ui-state-active,

#ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-active,

table.ui-datepicker-calendar td a:hover.ui-state-active,

.opentable a.OT_navLink:hover,

.opentable a.OT_navLink.selected {

background-color: {{{customize.colors.link}}};

}

input[type=submit] {

background-color: {{{customize.colors.link}}};

}

table.ui-datepicker-calendar td a:hover,

table.ui-datepicker-calendar td a.ui-state-active {

outline-color: {{{customize.colors.link}}};

}

/* Link Rollover */

a:hover,

a:hover .titles h2,

#menu > li.current a,

.sharing .share-label:hover,

.sharing.open .share-label,

.open .toggle a,

#main-content #store-listing .categories li.selected a,

.menu .section-titles li a:hover,

.index .pagination li.current a,

#blog > ul > li header h1 a:hover,

#datepicker .ui-datepicker-header .ui-datepicker-next.ui-datepicker-next-hover span,

#datepicker .ui-datepicker-header .ui-datepicker-prev.ui-datepicker-prev-hover span,

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next.ui-datepicker-next-hover span,

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev.ui-datepicker-prev-hover span {

color: {{{customize.colors.link_rollover}}};

}

.opentable form#OT_form .OT_wrapper ul.OT_list li.OT_submit a.OT_Find_a_Table {

background-color: {{{customize.colors.link_rollover}}};

}

#menu > li a:hover {

border-color: {{{customize.colors.link_rollover}}};

}

/* Muted */

.audio-player .length .load {

background: {{{customize.colors.muted}}};

}

blockquote:before,

cite:before,

.sharing:after,

.tags-categories ul:after {

color: {{{customize.colors.muted}}};

}

/* Buttons */

.add-to-cart,

.checkout,

.download {

background-color: {{{customize.colors.button_background}}};

}

/* Button Text */

.add-to-cart,

.checkout {

color: {{{customize.colors.button_text}}};

}

/* Button Hover */

.add-to-cart:hover,

.checkout:hover,

.widgets .audio .audio-player ol li .controls .play-pause:hover,

.widgets .audio .audio-player ol li .controls .next:hover,

.widgets .audio .audio-player ol li .controls .previous:hover,

.widgets .audio .audio-player ol li .controls .pause,

.download:hover {

background-color: {{{customize.colors.button_rollover}}};

color: {{{customize.colors.button_text}}};

}

.audio-player .length .progress,

#site-header nav#main-nav ul li a:hover,

#site-header nav#main-nav ul li.section span:hover,

.toggle:hover,

.open .toggle {

background-color: {{{customize.colors.button_rollover}}};

}

/* Borders */

#page-title,

#blog > ul > li,

.audio-player ol li,

.events ul li,

.items-in-cart li,

.widgets,

.widgets .widget,

#main-content #store-listing .categories,

.menu .section-titles,

#main-content .listing ul.listing-list li,

#main-content .menu ul.menu-list li .menu-item-price,

#main-content .menu,

.menu section.content-editor,

#main-content .listing section.content-editor,

#ui-datepicker-div.ui-datepicker,

table.ui-datepicker-calendar thead tr,

table.ui-datepicker-calendar tr,

table.ui-datepicker-calendar tr td,

.opentable form#OT_form .OT_wrapper ul.OT_list li input,

.opentable form#OT_form .OT_wrapper ul.OT_list li .OT_navList,

.ui-datepicker .ui-datepicker-header,

#ui-datepicker-div .ui-datepicker-header:before,

.ui-datepicker-calendar {

border-color: {{{customize.colors.border_color}}};

}

/* FONT FAMILY */

/***** body font family *****/

body,

.widgets .widget.audio .info h2,

.menu ul.menu-list li p.price,

#datepicker .ui-datepicker-header .ui-datepicker-title span.ui-datepicker-month,

#datepicker .ui-datepicker-header .ui-datepicker-title span.ui-datepicker-year,

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title span.ui-datepicker-month,

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title span.ui-datepicker-year,

.opentable form#OT_form .OT_wrapper ul.OT_list li.OT_submit a.OT_Find_a_Table {

font-family: {{{customize.fonts.families.body}}};

}

/***** site name font family *****/

.logo h1 {

font-family: {{{customize.fonts.families.site_name}}};

}

/***** navigation font family *****/

nav#main-nav,

.cart-link {

font-family: {{{customize.fonts.families.nav}}};

}

/***** titles font family *****/

#page-title,

#blog #page-title a,

.widgets .widget h2,

.index .titles h2,

#blog > ul > li header h1,

.menu ul.menu-list h2.item-title {

font-family: {{{customize.fonts.families.titles}}};

}

.details h2,

.content-editor h1,

.content-editor h2,

.content-editor h3,

.content-editor h4,

.content-editor h5,

.content-editor h6,

blockquote,

cite,

#store-cart .items-in-cart li .product-title a,

#main-content #store-detail .product-specifics h1,

#main-content .contact ul.contact-info li.contact-item.name

{

font-family: {{{customize.fonts.families.titles}}};

}

/* FONT SIZES */

/**** global font size *****/

body {

font-size: {{{customize.fonts.sizes.global}}};

}

/**** site title font size *****/

.logo {

font-size: {{{customize.fonts.sizes.site_titles}}};

}

/**** navigation font size *****/

nav#main-nav,

.cart-link {

font-size: {{{customize.fonts.sizes.nav}}};

}

/**** page titles font size *****/

#main-content #page-title {

font-size: {{{customize.fonts.sizes.page_titles}}};

}

/**** content font size *****/

#main-content .content-editor {

font-size: {{{customize.fonts.sizes.content}}};

}

/**** widgets font size *****/

.widgets {

font-size: {{{customize.fonts.sizes.widgets}}};

}

/**** footer font size *****/

footer#site-footer {

font-size: {{{customize.fonts.sizes.footer}}};

}

Dan-Levi · 5. mars 2014

Hei!

Prøv denne html fila:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!-- Spotlight Theme -->
<title>{{^page.is_homepage}}{{page.title}} - {{/page.is_homepage}}{{site.title}}</title>
{{{site.meta}}}

<!-- CSS
================================================== -->
{{{customize.css.basic}}}
{{{theme.css}}}
{{{customize.css.advanced}}}

<!-- IE
================================================== -->
<!--[if lte IE 8]>
<script src="http://html5shim.goo...5.js"></script>
<![endif]-->

{{{site.scripts.libs}}}
{{{site.scripts.head}}}
</head>
<body {{#page.is_homepage}}class="homepage"{{/page.is_homepage}}>
<div class="wrapper">
<header id="site-header" class="group{{#site.has_store}} has-store{{/site.has_store}}{{#site.link_to_cart}} show-cart{{/site.link_to_cart}}">

<div class="logo">
{{^customize.images.logo.url}}
<!--No Logo-->
<h1><a href="{{site.url}}">{{site.title}}</a></h1>
{{/customize.images.logo.url}}
{{#customize.images.logo.url}}
<!--Logo Uploaded-->
<h1><a href="{{site.url}}" title="Home"><img src="{{customize.images.logo.url}}" alt="{{site.title}}"></a></h1>
{{/customize.images.logo.url}}

<!--Subtitle-->
{{#site.subtitle}}<h2 class="subheader">{{{site.subtitle}}}</h2>{{/site.subtitle}}
</div>

<nav id="main-nav">
<span class="toggle">
<a href="#open-close" data-icon="≡">Menu</a>
</span>
<ul id="menu" class="group">
{{#site.nav}}
{{#section}}
<li class="section page_title">
<span>{{title}}</span>
<ul>
{{#pages}}
<li class="{{#current}}current{{/current}} page page_in_a_section"><a href="{{url}}" {{#target}}target="{{target}}"{{/target}}>{{title}}</a></li>
{{/pages}}
</ul>
</li>
{{/section}}
{{^section}}
<li class="{{#current}}current{{/current}} page page_title"><a href="{{url}}" {{#target}}target="{{target}}"{{/target}}>{{title}}</a></li>
{{/section}}
{{/site.nav}}
{{#site.has_store}}
<li class="page page_title cart">
<a href="{{site.store_url}}/cart" class="cart-link {{#site.link_to_cart}}show-cart{{/site.link_to_cart}}"><span class="label">Cart</span></a>
</li>
{{/site.has_store}}
</ul>
</nav>

</header>

<div class="main-container group">

{{#page.images.header.sizes}}
<div class="header-image">
<img src="{{page.images.header.sizes.resize_1024.url}}">
</div>
{{/page.images.header.sizes}}

<!-- Primary Page Layout
================================================== -->

<div id="main-content" role="main" class="group">

{{#site.is_protected}}
<!-- SITE: Password Protected -->
<h1 id="page-title">Enter password</h1>
<section class="content-editor password-form">
<form action="" method="post">
<div id="description">
<h3>
<input type="password" id="password" name="password" />
<input type="submit" value="Submit" id="submit" />
</h3>
<p>Please enter the password to view this page.</p>
</div>
</form>
</section>
{{/site.is_protected}}

{{#page.is_protected}}
<!-- PAGE: Password Protected -->
<h1 id="page-title">Enter password</h1>
<section class="content-editor">
<form action="" method="post">
<div id="description">
<h3>
<input type="password" id="password" name="password" />
<input type="submit" value="Submit" id="submit" />
</h3>
<p>Please enter the password to view this page.</p>
</div>
</form>
</section>
{{/page.is_protected}}

{{#page.not_found}}
<!-- PAGE TYPE: Not Found -->
<h1 id="page-title">Oops, there was an error.</h1>
<section class="content-editor small-content">
<p>The page you're looking for can't be found. Double-check your URL, or just go <a href="{{site.url}}" title="home">home</a>.</p>
</section>
{{/page.not_found}}

{{#menu}}
<!-- PAGE TYPE: Menu -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

<div class="menu {{format}}">
{{#page.has_content}}
<section class="content-editor">
{{{body}}}
</section>
{{/page.has_content}}

{{#show_navigation}}
<ul class="section-titles">
{{#items}}
{{#section}}
<li>
<a href="#{{slug}}" title="{{title}}">{{title}}</a>
</li>
{{/section}}
{{/items}}
</ul>
{{/show_navigation}}

<ul class="menu-list group">
{{#items}}
<li class="menu-item{{#section}} has-sub-items{{/section}}">

{{^section}}
<div class="menu-item-price">
{{#title}}<h2 class="item-title">{{title}}</h2>{{/title}}
{{#price}}<p class="price">{{price}}</p>{{/price}}
</div>
{{#description}}<div class="description content-editor">{{{description}}}</div>{{/description}}
{{/section}}

{{#section}}
<h2 class="section-title"><a name="{{slug}}"></a>{{title}}</h2>
<ul class="sub-items group">
{{#items}}
<li class="menu-item">
<div class="menu-item-price">
{{#title}}<h2 class="item-title">{{title}}</h2>{{/title}}
{{#price}}<p class="price">{{price}}</p>{{/price}}
</div>
{{#description}}<div class="description content-editor">{{{description}}}</div>{{/description}}
</li>
{{/items}}
</ul>
{{/section}}

</li>
{{/items}}
</ul>

</div>
<div class="sharing page-sharing">
{{{sharing}}}
</div>
{{/menu}}

{{#custom}}
<!-- PAGE TYPE: Custom -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>
{{#page.has_content}}
<section class="content-editor custom">
{{{body}}}
</section>
{{/page.has_content}}

<div class="sharing page-sharing">
{{{sharing}}}
</div>
{{/custom}}

{{#about}}
<!-- PAGE TYPE: About -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>
<section id="about">

<section class="content-editor">
{{#media}}
{{#image}}
<img class="{{format}}" alt="{{page.title}}" src="{{responsive.url}}" />
{{/image}}
{{/media}}
{{{body}}}
</section>

<div class="sharing page-sharing">
{{{sharing}}}
</div>
</section>

{{/about}}

{{#contact}}
<!-- PAGE TYPE: Contact -->

<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

<section class="contact content-editor">

<div class="map-content-container">
{{#map}}
<div class="map-container">
{{{map}}}
</div>
{{/map}}

{{#page.has_content}}
<div class="content">
{{{body}}}
</div>
{{/page.has_content}}
</div>

<ul class="contact-info">
{{#items}}
<li class="contact-item {{type}}">{{#type_title}}<span class="type">{{type_title}} </span>{{/type_title}}<span class="value">{{{formatted}}}</span></li>
{{/items}}
</ul>

{{#address}}
<address>{{{address}}}</address>
{{/address}}

</section>
<div class="sharing page-sharing">
{{{sharing}}}
</div>
{{/contact}}

{{#listing}}
<!-- PAGE TYPE: Listing -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

<div class="listing content-editor group {{format}}">
{{#page.has_content}}
<section class="content-editor">
{{{body}}}
</section>
{{/page.has_content}}
<ul class="listing-list">
{{#items}}
<li>
{{#media}}
<span class="image">{{{media}}}</span>
<span class="info">
{{#title}}<h2 class="listing-title">{{title}}</h2>{{/title}}
{{#description}}<div class="description">{{{description}}}</div>{{/description}}
</span>
{{/media}}

{{^media}}
{{#title}}<h2 class="listing-title">{{title}}</h2>{{/title}}
{{#description}}<div class="description">{{{description}}}</div>{{/description}}
{{/media}}
</li>
{{/items}}
</ul>
</div>

<div class="sharing">
{{{sharing}}}
</div>
{{/listing}}

{{#tumblr}}
<!-- PAGE TYPE: Tumblr -->


<section id="blog" class="{{view}} tumblr">
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>
<ul>
{{#posts}}
<li class="group">
<article class="{{type}} group{{^title}} no-title{{/title}}">



{{#text}}
<header>
<time pubdate="pubdate">
<span class="mon">{{date => date.abbr_month}}</span>
<span class="day">{{date => date.day}}</span>
</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>
</header>
<div class="blogs-content content-editor">
{{{body}}}
</div>
{{/text}}

{{#photo}}
<header>
<time pubdate="pubdate">
<span class="mon">{{date => date.abbr_month}}</span>
<span class="day">{{date => date.day}}</span>
</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>
</header>
{{#photos}}
<img src="{{resize_500.url}}" alt="{{alt}}" />
{{/photos}}
<section class="blogs-content content-editor">
{{{body}}}
</section>
{{/photo}}

{{#quote}}
<header>
<time pubdate="pubdate">
<span class="mon">{{date => date.abbr_month}}</span>
<span class="day">{{date => date.day}}</span>
</time>
</header>
<section class="blogs-content content-editor">
<blockquote cite="{{cite}}">
<p>{{{body}}}</p>
{{#source}}
<footer>
<span>{{{source}}}</span>
</footer>
{{/source}}
</blockquote>
</section>
{{/quote}}

{{#link}}
<header>
<time pubdate="pubdate">
<span class="mon">{{date => date.abbr_month}}</span>
<span class="day">{{date => date.day}}</span>
</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}{{^title}}{{url}}{{/title}}</a></h1>
</header>
<section class="blogs-content content-editor">
{{{body}}}
</section>
{{/link}}

{{#audio}}
<header>
<time pubdate="pubdate">
<span class="mon">{{date => date.abbr_month}}</span>
<span class="day">{{date => date.day}}</span>
</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>
</header>
<section class="blogs-content content-editor">
{{{player.embed_code}}}
{{{body}}}
</section>
{{/audio}}

{{#video}}
<header>
<time pubdate="pubdate">
<span class="mon">{{date => date.abbr_month}}</span>
<span class="day">{{date => date.day}}</span>
</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>
</header>
<div class="video">
<div class="video-container">
{{{player.resize_500.embed_code}}}
</div>
</div>
<section class="blogs-content content-editor">
{{{body}}}
</section>
{{/video}}

{{#chat}}
<header>
<time pubdate="pubdate">
<span class="mon">{{date => date.abbr_month}}</span>
<span class="day">{{date => date.day}}</span>
</time>

<h1><a href="{{url}}" title="{{title}}">{{title}}</a></h1>
</header>
<section class="blogs-content content-editor">
<ul>
{{#dialogue}}
<li>
<span class="name">{{{name}}}:</span>
<span class="phrase">{{{phrase}}}</span>
</li>
{{/dialogue}}
</ul>
</section>
{{/chat}}

<aside>
<div class="tumblr-sharing">
<a href="{{permalink}}#notes" class="comments" data-icon="☁">{{note_count}} comments</a>
<a href="http://www.tumblr.com/reblog/{{id}}/{{reblog_key}}" class="reblog" target="_blank" data-icon="⟲">Reblog</a>
</div>

{{#sharing}}
<div class="sharing">
{{{sharing}}}
</div>
{{/sharing}}
</aside>

{{#post_view}}
{{{comments}}}
{{/post_view}}
</article>
</li>
{{/posts}}
</ul>

{{#paging}}
<div class="blog-paging">
{{#older}}
<a class="older" href="{{url}}" title="See older posts">← Older</a>
{{/older}}
{{#newer}}
<a class="newer" href="{{url}}" title="See newer posts">Newer →</a>
{{/newer}}
</div>
{{/paging}}
</section>
{{/tumblr}}

{{#blog}}
<!-- PAGE TYPE: Blog -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}} class="blog-title"><a href="{{page.url}}" title="back to all posts">{{page.title}}</a></h1>
{{#has_categories}}
<div class="category-dropdown">
<div class="select-box" data-icon="∨">
{{^category}}<span class="category">Category</span>{{/category}}
{{#category}}<span class="category">{{category}}</span>{{/category}}
</div>
<select id="select-category">
<option></option>
{{#categories}}
<option>{{.}}</option>
{{/categories}}
</select>
</div>
{{/has_categories}}

{{#subscribe}}<a class="subscribe" data-icon="R" href="{{page.url}}?rss">Subscribe</a>{{/subscribe}}

{{#post_view}}
<a href="{{page.url}}" class="back">Back to all posts</a>
{{/post_view}}

<section id="blog" class="{{view}}">

{{#has_filter}}
<div id="filter">
<p class="blog-crumbs">
{{#tag}}
<span class="tag-filtered">Currently showing posts tagged <em>{{tag}}</em></span>
{{/tag}}
</p>
</div>
{{/has_filter}}

<ul>
{{#posts}}
<li class="group">
<article class="{{type}} group{{^title}} no-title{{/title}}">

<header>
<time pubdate="pubdate">
<span class="mon">{{created => date.abbr_month}}</span>
<span class="day">{{created => date.day}}</span>
</time>
{{^audio}}<h1><a href="{{url}}" title="{{title}}" {{#target}}target="{{target}}"{{/target}}>{{title}}</a></h1>{{/audio}}
</header>

{{#text}}
<div class="blogs-content content-editor">
{{{body}}}
</div>
{{/text}}

{{#image}}
{{#images}}
<img src="{{images.resize_800.url}}" alt="{{alt}}" />
{{/images}}
<section class="blogs-content content-editor">
{{{body}}}
</section>
{{/image}}

{{#quote}}
<section class="blogs-content">
<blockquote cite="{{cite}}">
<p>{{{body}}}</p>
{{#source}}
<footer>
<span>{{{source}}}</span>
</footer>
{{/source}}
</blockquote>
</section>
{{/quote}}

{{#link}}
<section class="blogs-content content-editor">
{{{body}}}
</section>
{{/link}}

{{#audio}}
<section class="blogs-content content-editor">
<article class="audio-player">
<ol>
<li data-id="{{id}}" data-uid="{{uid}}">
<div class="controls">
<a href="#" class="play-pause" title="play/pause" data-icon="▶" data-icon-pause="ⅱ">Play/Pause</a>
</div>
<div class="info">
<h2>{{title}}</h2>
<span class="time">0:00</span>
</div>
<span class="length">
<span class="load" style="width: 0%;"></span>
<span class="progress" style="width: 0%;"></span>
</span>
<audio preload="auto">
<source src="{{mp3_url}}" type="audio/mpeg" />
</audio>
</li>
</ol>
</article>
{{{body}}}
</section>
{{/audio}}

{{#video}}
<div class="video">
<div class="video-container">
{{{embed}}}
</div>
</div>
<section class="blogs-content content-editor">
{{{body}}}
</section>
{{/video}}

{{#has_tags_or_categories}}
<footer>

{{#has_categories}}
<div class="tags-categories">
<p><span>Category:</span></p>
<ul class="categories">
{{#categories}}
<li><a href="{{page.url}}/category/{{title}}" title="title">{{title}}</a></li>
{{/categories}}
</ul>
</div>
{{/has_categories}}

{{#has_tags}}
<div class="tags-categories">
<p><span>Tags:</span></p>
<ul class="tags">
{{#tags}}
<li><a href="{{page.url}}/tag/{{.}}" title="{{.}}">{{.}}</a></li>
{{/tags}}
</ul>
</div>
{{/has_tags}}

</footer>
{{/has_tags_or_categories}}

{{^post_view}}{{#comments_on}}<a href="{{url}}#comments" class="comments" data-icon="☁">Comments</a>{{/comments_on}}{{/post_view}}

{{#sharing}}
<div class="sharing">
{{{sharing}}}
</div>
{{/sharing}}

{{#post_view}}
{{{comments}}}
{{/post_view}}
</article>
</li>
{{/posts}}
</ul>

{{#paging}}
<div class="blog-paging">
{{#older}}
<a class="older" href="{{url}}" title="See older posts">← Older</a>
{{/older}}
{{#newer}}
<a class="newer" href="{{url}}" title="See newer posts">Newer →</a>
{{/newer}}
</div>
{{/paging}}
</section>
{{/blog}}

{{#gallery}}
<!-- PAGE TYPE: Gallery -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>

<section class="{{format}}-gallery {{#slideshow_thumbnails}}{{thumb_layout}}-layout{{/slideshow_thumbnails}} {{#default_to_slideshow}}show{{/default_to_slideshow}}">
{{#slideshow}}
<div class="large-gallery">
<div class="navigation {{#autoplay}}hide{{/autoplay}}">
<div class="navigation-controls">
<a href="#" class="back-to-slideshow" title="Back to Thumbnails" data-icon="∷">Back to Thumbnails</a>
<a class="previous" href="#" title="previous" data-icon="<">Prev</a>
<a class="next" href="#" title="next" data-icon=">">Next</a>
</div>
<p class="count"><span class="current">1</span><span class="divider">/</span><span class="total">{{total_count}}</span></p>
</div>

<ul>
{{#items}}
<li data-id="{{id}}" data-type="{{type}}" class="count_{{count}} {{orientation}}" {{#first}}style="display: block;"{{/first}}>

{{#video}}
<div class="video {{ratio}}">
{{{embed}}}
</div>
{{/video}}

{{#photo}}

{{#on_virb}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_1600.url}}" alt="{{alt}}" />
{{/on_virb}}

{{#on_instagram}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_612.url}}" alt="{{alt}}" />
{{/on_instagram}}

{{#on_flickr}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_original.url}}" alt="{{alt}}" />
{{/on_flickr}}

{{/photo}}

{{#has_details}}
<div class="details">
{{#title}}
<h2>
{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}
{{title}}
{{#url}}</a>{{/url}}
</h2>
{{/title}}
{{#body}}<p>{{{body}}}</p>{{/body}}
</div>
{{/has_details}}
</li>
{{/items}}
</ul>

</div>
{{/slideshow}}
<ul class="thumbnails">
{{#items}}
<li {{#on_instagram}}class="instagram"{{/on_instagram}}>
<a href="{{url}}" data-type="{{type}}" data-source="{{source}}" title="{{title}}">
{{#on_virb}}
{{#video}}
<img src="{{spacer}}" data-src="{{images.resize_240.url}}" data-width="{{images.resize_240.width}}" data-height="{{images.resize_240.height}}" alt="{{alt}}" />
{{/video}}
{{#photo}}
<img src="{{spacer}}" data-src="{{images.responsive_500.url}}" data-width="{{images.responsive_500.width}}" data-height="{{images.responsive_500.height}}" alt="{{alt}}" />
{{/photo}}
{{/on_virb}}

{{#on_instagram}}
<img src="{{spacer}}" data-src="{{images.responsive_612.url}}" data-width="{{images.responsive_612.width}}" data-height="{{images.responsive_612.height}}" alt="{{alt}}" />
{{/on_instagram}}

{{#on_flickr}}
<img src="{{spacer}}" data-src="{{images.responsive_500.url}}" data-width="{{images.responsive_500.width}}" data-height="{{images.responsive_500.height}}" alt="{{alt}}" />
{{/on_flickr}}

{{#on_vimeo}}
<img src="{{spacer}}" data-src="{{images.responsive_500.url}}" data-width="{{images.responsive_500.width}}" data-height="{{images.responsive_500.height}}" alt="{{alt}}" />
{{/on_vimeo}}

{{#on_youtube}}
<img src="{{spacer}}" data-src="{{images.responsive_500.url}}" data-width="{{images.responsive_500.width}}" data-height="{{images.responsive_500.height}}" alt="{{alt}}" />
{{/on_youtube}}
</a>
</li>
{{/items}}
</ul>

{{#vertical}}
<ul class="large-gallery">
{{#items}}
<li class="count_{{count}} {{orientation}}" data-id="{{id}}" data-type="{{type}}">
{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}
{{#video}}
<div class="video {{ratio}}">
{{{embed}}}
</div>
{{/video}}

{{#photo}}

{{#on_virb}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_1600.url}}" alt="{{alt}}" />
{{/on_virb}}

{{#on_instagram}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_612.url}}" alt="{{alt}}" />
{{/on_instagram}}

{{#on_flickr}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_original.url}}" alt="{{alt}}" />
{{/on_flickr}}

{{/photo}}

{{#has_details}}
<div class="details">
{{#title}}<h2>{{title}}</h2>{{/title}}
{{#body}}<p>{{{body}}}</p>{{/body}}
</div>
{{/has_details}}
{{#url}}</a>{{/url}}
</li>
{{/items}}
</ul>
{{/vertical}}

{{#horizontal}}
<div class="horizontal-gallery-container">
<ul class="large-gallery">
{{#items}}
<li class="count_{{count}} {{orientation}}" data-id="{{id}}" data-type="{{type}}">
<div class="media-container">
{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}
{{#video}}
<div class="video {{ratio}}">
{{{embed}}}
</div>
{{/video}}

{{#photo}}

{{#on_virb}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_1600.url}}" alt="{{alt}}" />
{{/on_virb}}

{{#on_instagram}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_612.url}}" alt="{{alt}}" />
{{/on_instagram}}

{{#on_flickr}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_original.url}}" alt="{{alt}}" />
{{/on_flickr}}

{{/photo}}

{{#has_details}}
<div class="details">
{{#title}}<h2>{{title}}</h2>{{/title}}
{{#body}}<p>{{{body}}}</p>{{/body}}
</div>
{{/has_details}}
{{#url}}</a>{{/url}}
</div>
</li>
{{/items}}
</ul>
</div>
{{/horizontal}}

{{#grid}}
<ul class="large-gallery">
{{#items}}
<li class="count_{{count}} {{orientation}}" data-id="{{id}}" data-type="{{type}}">
{{#url}}<a href="{{url}}" title="{{title}}">{{/url}}

{{#photo}}
{{#on_dribbble}}
<img src="{{spacer}}" data-src="{{images.responsive.url}}" data-width="{{images.responsive.width}}" data-height="{{images.responsive.height}}" data-full-src="{{images.responsive_400.url}}" alt="{{alt}}"/>
{{/on_dribbble}}
{{/photo}}

{{#has_details}}
<div class="details">
{{#show_info}}
{{#title}}<h2>{{title}}</h2>{{/title}}
{{#body}}<p>{{{body}}}</p>{{/body}}
{{/show_info}}
{{#meta}}
<div class="meta">
{{#likes}}<p data-icon="♥">{{{likes}}}</p>{{/likes}}
{{#views}}<p data-icon="I">{{{views}}}</p>{{/views}}
{{#comments}}<p data-icon="☁">{{{comments}}}</p>{{/comments}}
<a href="{{url}}" data-icon="⍈">View</a>
</div>
{{/meta}}
</div>
{{/has_details}}
{{#url}}</a>{{/url}}
</li>
{{/items}}
</ul>
{{/grid}}

{{#page.has_content}}
<section class="content-editor">
{{{body}}}
</section>
{{/page.has_content}}

<div class="sharing page-sharing">
{{{sharing}}}
</div>

</section>

{{/gallery}}

{{#audio}}
<!-- PAGE TYPE: Audio -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>
<section class="audio">
{{#soundcloud}}
{{{embed}}}
{{/soundcloud}}
{{^soundcloud}}
{{#images}}
<div class="album-art">
<img src="{{images.crop_300x300.url}}" alt="{{page.title}}" />
</div>
{{/images}}

<article class="audio-player {{^images}}no-art{{/images}}">
<ol>
{{#songs}}
<li data-title="{{title}}" data-id="{{id}}" data-uid="{{uid}}" data-source="{{source}}">
{{#playable}}
<div class="controls">
<a href="#" class="play-pause" title="play/pause" data-icon="▶" data-icon-pause="ⅱ">Play/Pause</a>
</div>
{{/playable}}
<div class="info">

{{#playable}}

<p class="time">0:00</p>

<p class="title">{{title}}</p>

{{/playable}}
{{#downloadable}}<a class="download" href="{{mp3_url}}" title="download track" data-icon="↓">Download</a>{{/downloadable}}
</div>
<span class="length">
<span class="load" style="width: 0%;"></span>
<span class="progress" style="width: 0%;"></span>
</span>
<audio preload="none">
<source src="{{mp3_url}}" type="audio/mpeg" />
</audio>
</li>
{{/songs}}
</ol>
</article>
{{/soundcloud}}
</section>
{{#page.has_content}}
<section class="content-editor">
{{{body}}}
</section>
{{/page.has_content}}
<div class="sharing page-sharing">
{{{sharing}}}
</div>
{{/audio}}

{{#index}}
<!-- PAGE TYPE: Index -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>
<section class="index">
<ul class="{{thumb_size}} {{thumb_scale}}">
{{#pages}}
<li class="count_{{count}} {{^has_image}}no-image{{/has_image}}">
<a href="{{site.url}}{{url}}" title="{{title}}" {{#target}}target="{{target}}"{{/target}}>
{{#has_image}}<img src="{{image_url}}" alt="{{title}}">{{/has_image}}

<div class="titles">
<h2>{{title}}</h2>
<h3>{{{sub_title}}}</h3>
</div>
</a>
</li>
{{/pages}}
</ul>
</section>
{{#page.has_content}}
<section class="content-editor">
{{{body}}}
</section>
{{/page.has_content}}
<div class="sharing page-sharing">
{{{sharing}}}
</div>
{{/index}}

{{#events}}
<!-- PAGE TYPE: Events -->
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{page.title}}</h1>
{{#page.has_content}}
<section class="content-editor">
{{{body}}}
</section>
{{/page.has_content}}
<section class="events">
<ul>
{{#items}}
<li>
<div class="date">
<span class="mon">{{start_time => date.abbr_month}}</span>
<span class="day">{{start_time => date.day}}</span>
</div>

<div class="event-info">
<h2 class="title">{{title}}</h2>
<div class="info">
{{#location.title}}
<span class="address">{{location.title}}</span>
{{/location.title}}

{{^all_day}}
<span class="timeframe">{{start_time => date.time}}{{#end_time}} - {{end_time => date.time}}{{/end_time}}</span>
{{/all_day}}
</div>
{{#permalink}}
<a class="see-details" title="See details for {{title}}" href="{{permalink}}">See Details →</a>
{{/permalink}}
</div>
</li>
{{/items}}
</ul>
</section>

<div class="sharing page-sharing">
{{{sharing}}}
</div>
{{/events}}

{{#store}}
<!-- PAGE TYPE: Store -->
{{#listing}}
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{{page.title}}}</h1>

<section id="store-listing" class="index group{{#store.on_etsy}} etsy{{/store.on_etsy}}">

{{#has_categories}}
<ul class="categories">
{{#categories}}
<li {{#selected}}class="selected"{{/selected}}>
<a href="?category={{slug}}" title="{{{title}}}">{{{title}}}</a>
</li>
{{/categories}}
</ul>
{{/has_categories}}

<ul class="{{thumb_scale}}">
{{#products}}
<li class="count_{{count}}">
<a href="{{page.url}}/{{id}}" title="{{{title}}}">
<img src="{{main_image.crop_340x270}}" alt="{{{title}}}">
{{#coming_soon}}
<div class="titles coming-soon">
<h2>{{{title}}}</h2>
</div>
<p class="price">Coming Soon</p>
{{/coming_soon}}
{{#sold_out}}
<div class="titles sold-out">
<h2>{{{title}}}</h2>
</div>
<p class="price">Sold Out</p>
{{/sold_out}}
{{^sold_out}}
{{^coming_soon}}
<div class="titles">
<h2>{{{title}}}</h2>
</div>
<p class="price"><span>{{currency.sign}}</span>{{price}}</p>
{{/coming_soon}}
{{/sold_out}}
</a>
</li>
{{/products}}
</ul>

{{#pagination}}{{{pagination}}}{{/pagination}}
</section>
{{#page.has_content}}
<section class="content-editor">
{{{body}}}
</section>
{{/page.has_content}}
<div class="sharing page-sharing">
{{{sharing}}}
</div>
{{/listing}}

{{#product_detail}}
<h1 id="page-title" {{#page.hide_title}}style="display:none;"{{/page.hide_title}}>{{{page.title}}}</h1>
<section id="store-detail" class="group{{#store.on_etsy}} etsy{{/store.on_etsy}}">

<div class="product-specifics group">

<div class="product-title-price">
<h1>{{{product.title}}}
{{#product.coming_soon}}
<p class="price coming-soon">Coming Soon</p>
{{/product.coming_soon}}
{{#product.sold_out}}
<p class="price sold-out">Sold Out</p>
{{/product.sold_out}}
{{^product.sold_out}}
{{^product.coming_soon}}
<p class="price">{{currency.sign}}<span id="price">{{product.price}}</span></p>
{{/product.coming_soon}}
{{/product.sold_out}}
</h1>
</div>

<div class="product-description">
{{{product.body}}}
</div>

{{^product.sold_out}}
{{^product.coming_soon}}
{{#product.has_variations}}
{{#product.variations}}
<div class="options{{#has_single_option}} single{{/has_single_option}}">
<select id="product-options">
{{#options}}
<option data-price="{{price}}" value="{{value}}" {{#sold_out}}disabled="disabled"{{/sold_out}}>{{name}} {{#sold_out}}(sold out){{/sold_out}}</option>
{{/options}}
</select>
</div>
{{/product.variations}}
{{/product.has_variations}}

<input class="add-to-cart" type="button"
data-title="{{product.title}}"
data-id="{{product.id}}"
data-price="{{product.price}}"
data-thumb="{{product.main_image.crop_75x75}}"
data-currency="{{currency.code}}" value="Add To Cart">
{{/product.coming_soon}}
{{/product.sold_out}}



<a title="Back to Product Listing" href="{{store.url}}" class="back-to-listing">← Back to Product Listing</a>

<div class="sharing">
{{{sharing}}}
</div>
</div>

<div class="main-image-container">
<a href="#"><img alt="{{product.title}}" src="{{product.main_image.original}}" class="main-image"></a>

<ul class="thumbnails">
{{#product.images}}
<li><a href="#"><img src="{{original}}"></a></li>
{{/product.images}}
</ul>
</div>
</section>

{{/product_detail}}

{{#cart}}
<h1 id="page-title">Your Cart</h1>

<section id="store-cart" class="group{{#store.on_etsy}} etsy{{/store.on_etsy}}">

<ul id="items-in-cart" class="items-in-cart">
</ul>

<div id="cart-empty-message" class="empty-notice">
<p>Your cart is currently empty! Why don't you <a href="{{store.url}}">start shopping?</a></p>
</div>

<div class="total">
<p class="label">Your subtotal is</p>
<div class="price" id="cart-total"><span class="amount">$0</span> <span class="currency">USD</span></div>
</div>

<div class="cart-actions">
<a title="Proceed to Checkout" class="checkout" href="#">Proceed to Checkout</a>
<a title="Continue Shopping" class="continue-shopping" href="{{store.url}}">← Continue Shopping</a>
</div>
</section>
{{/cart}}

{{/store}}
</div>

{{#page.has_widgets}}
{{^page.is_protected}}
{{/page.is_protected}}
{{/page.has_widgets}}

{{#site.footer}}
<footer id="site-footer">
{{{site.footer}}}
</footer>
{{/site.footer}}

</div> <!-- end wrapper -->
</div> <!-- end container -->

</div>


<!-- JS
================================================== -->
{{{site.scripts.body}}}

<!-- End Document
================================================== -->
</body>
</html>

En kjapp og litt stygg fiks på CSS, men prøv å legg til dette nederst i den nederste CSS filen som blir inkludert i <head>.

@media (min-width: 950px)
#main-content {
float: left !important;
padding: 30px 0 30px 60px !important;
width: 95% !important;
}

Angående linking til sider som er utenfor menyen vet jeg ikke, kjenner ikke til Virb dessverre.

Gjerne gi tilbakemelding om det ikke fungerer, eller om og hvor du sitter fast.

Endret 5. mars 2014 av Dan-Levi

tobbelobben · 5. mars 2014

Heisann, det funka med å legge inn HTML fila sånn at det ble fjerna, men fant desverre ikke noe head i CSS fila. Mulig jeg overså, men prøvde å putte inn litt forkjellige plasser men ingen endring.

Er fortsatt på trial-versjon av virb. Så er åpen for andre web-editor forslag. Har prøvd meg i one.com sin web editor, men den ble veldig lite proff. Så hvis det er andre sider som er like billige som virb og som har muligheten til å endre nesten alt og har temaer som gjør at det ser veldig bra ut er jeg åpen for forslag!

Det som såklart hadde vært optimalt er jo en blanding av vrib og one.com. One.com har veldig oversiktlig og lett måte å endre alt på siden med "bokser" man kan plassere overalt og velge tekst, bilder, video, galleri osv osv. Men temaene er ikke på samme nivå som virb. Så en blanding hvis det finnes.

Endret 5. mars 2014 av tobbelobben

Dan-Levi · 6. mars 2014

Hei! Mulig jeg ordla meg rart. Det skal nederst i Css fila.

Jeg lager son regel alt fra scratch med mindre jeg tar i bruk Wordpress eller Joomla! Wordpress skal kunne settes opp enkelt på one.com gjennom kontrollpanelet der. Jeg er forøvrig mer fan av Joomla! Et snedig verktøy du kan bruke om du ikke har tilstrekkelig erfaring med koding av html og css er å bruke Artisteer til å forme temaet på siden. Sjekk det ut på youtube f.eks :-)

Logg inn

Hjelp til endring i HTML på virb.com

Anbefalte innlegg

tobbelobben

Lenke til kommentar

Videoannonse

cronbach alpha

Lenke til kommentar

Dan-Levi

Lenke til kommentar

tobbelobben

Lenke til kommentar

Dan-Levi

Lenke til kommentar

tobbelobben

Lenke til kommentar

Dan-Levi

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

AP går inn for fri abort til uke 18 1 2 3 4 55

Presidentvalget i USA 2024 1 2 3 4 515

Tesla - kaféen 1 2 3 4 433

Hvem er aktive 0 medlemmer