HV XXL2 Theme

Contreras · June 2012

Hallo allemaal,

Helemaal nieuw hier, en een echte RW beginner.
Ik wil graag in het menu van XXL2 van Henk Vrieselaar
een paar van de menu-items in een kleiner font zien
alsof het een soort sub-menu lijkt.
Is hier een trick voor, of heb ik er een stack/snippet voor nodig?
Ik vind het een gaaf theme, en heb er me al vele uren mee vermaakt.

Groet, Ed Westerik

Henk Vrieselaar · July 2012

Beste Ed,
Ik kom pas nu je post tegen, sorry voor de late reactie.
Eén dezer dagen komt er een update van het thema uit (mooiere fonts, veel meer opties, menu links of rechts, enz.) én een upgrade waarbij het XXL thema 'responsive' is, dus zich aanpast aan de browser (computer, iPad, iPhone en andere mobile devices).

Nu over je vraag: een kleiner font voor een bepaald menu-item is zeker mogelijk. Stel je menu-item heet nu Frankrijk, dus dat staat ook in je Page Title (Page-Inspector > General).
Vervang dat in de Page-Title nu met

<p style="font-size: 22px;">Frankrijk</p>

Hier is het voorbeeld 22 gekozen, elk getal is mogelijk. Als je vindt dat de letters erg dicht op elkaar kruipen kun je nog ruimte tussen te letters maken met de letter-spacing:

<p style="font-size: 22px;letter-spacing:0px;">Frankrijk</p>

of een beetje meer:

<p style="font-size: 22px;letter-spacing:1px;">Frankrijk</p>

Contreras · July 2012

Beste Henk,

Dat is geweldig goed nieuws!
Zeer benieuwd naar de "noviteiten".
Je hulp met betrekking tot de font-size is perfect!
Heel veel dank!

Ed Westerik

Contreras · July 2012

Beste Henk,

Wanneer het XXL thema responsive wordt betekent dat dan
dat het menu -dat ik nu noodgewongen te ver naar links heb moeten zetten-
automatisch aangepast wordt? (Er staat een waarschuwing in je handleiding, maar ik las ik pas toen ik het had gekocht!).

http://edwesterik.nl/

Het is mijn eerste poging om een site te maken.

Vriendelijk groet,

Ed Westerik

Henk Vrieselaar · July 2012

Wanneer je het browservenster smaller maakt met je huidige website, of je website op een iPad/iPhone of andere mobiel apparaat bekijkt, zul je zien dat het menu of zelfs een deel van je content (tekst, enz.) buiten boord valt. Met een responsieve site is dat niet meer zo: zodra het venster smaller wordt wordt ook de content smaller, verschuift het menu wat naar links en wordt eventueel iets kleiner. En wordt het heel smal dan verschijnt het menu bovenaan de pagina. De tekst blijft dus altijd goed te lezen, ook al heb je je website heel breed en het menu heel ver naar rechts.
Ik kan wel vast laten zien wat het wordt: versmal met deze site je browser maar eens.

De gratis (niet-responsive) update komt in twee versies: XXL-Right en XXL-Left. Die heeft veel meer en andere opties, fraaiere fonts, enz. Bovendien heeft XXL-Left het menu links.
Dit is een voorbeeld (let op: dus niet responsive).

Dan is er de responsive XXL: XXL-r Right en XXL-r Left. Huidige XXL gebruikers krijgen tijdelijk 75% korting op deze twee versies. Een kleine bijbetaling voor de responsieve dus omdat de responsieve opties echt heel lastig waren in te bouwen.

Contreras · July 2012

Fantastisch Henk!!!

Ik ga duidelijk voor responsive.
Weet natuurlijk niet wanneer het komt, maar ik ben je eerste klant.

Groet,

Ed Westerik

Henk Vrieselaar · July 2012

Voor het einde van deze week... misschien vanavond al, maar ik wacht nog op een stukje tekst voor de manual dat iemand zou aanleveren.

Contreras · July 2012

Hallo Henk,

Helemaal goed,..ik verheug me nu al op!
Mocht je tips hebben voor mijn site dan hoor ik dat graag.
Snap wel dat er nog niet zoveel eer aan mijn site valt hahah.
Je wilt niet weten hoeveel plezier ik gehad heb om deze site te maken.
Dagen en nachten,...
Je Thema's zijn echt heel gaaf, en de aanwijzingen duidelijk.
I'll spread the news!

Ed Westerik

Contreras · July 2012

Hallo Henk,..

even zomaar ik weet niet hoe dat werkt,...
Ik ben een klassiek gitarist.
En voor een concert gaat de adrenaline enorm omhoog.
Is dat nu ook zo voor een release van een thema?
Ik kan me dat goed voorstellen,..
Je creatieve proces heeft zijn werk gedaan.
En dan moet het "gebeuren".

Groeten,

Ed

Henk Vrieselaar · July 2012

Ik denk dat het vergelijkbaar is als bij jou of een ander creatief beroep. Maar ook iemand die een lezing voorbereid zal op dé dag die spanning voelen.
Je werkt doorgaans vele weken aan een nieuw thema, telkens wijzigingen, nieuwe ideeën inpassen, teleurstellingen dat iets niet werkt (vooral de testen met Internet Explorer zijn spannend) of helemaal niet mogelijk is. Dan het resultaat laten testen door een aantal gebruikers en hun opmerkingen meenemen, opnieuw veranderen... en er een keer een punt achter zetten (eindeloos wijzigen wordt vaak niet mooier, dat zal in de muziek ook wel zo zijn...).
Vervolgens een demo site maken en dan bij gebruik van bepaalde plugins en stacks ontdekken dat ze botsen met het thema. Weer uitzoeken waar de fout ligt, enz. Dan een gebruiksaanwijzing maken, een nieuwsbrief... Nou ja, dan is zo'n release vanavond of morgen best wel spannend: dan moet het inderdaad 'gebeuren', en wacht ik de reacties echt met spanning af!

Henk

P.S. Je site ziet er goed uit. Dat meen ik. De foto's zijn schitterend, prachtige close-ups (ben ik gek op). Mar let er bij dit thema op dat de content (tekst, menu, enz.) vooral aan de linkerzijde ligt. Als je de browser breder maakt, zoals op een grote iMac, zie je dat het rechts wat leeg kan zijn. Zorg dus dat juist rechts het accent van je foto ligt. Zo heb ik hier de fietser rechts gezet en op deze pagina knalt de appel er rechtsonder in, zodat het geheel in balans is.
Op deze pagina laat ik zien hoe het goed kan zijn (de eerste 3 foto's) en vervolgens waar het fout is (op de laatste foto's staat de persoon teveel naar links. Door de foto te spiegelen zou het weer in balans zijn). Die schitterende foto's zijn gemaakt door jan Masyn uit België.

Bij deze pagina zou ik dus de gitaar omdraaien zodat de hals van de gitaar van rechts komt. Stuk spannender.
Bij deze zou je de foto ook kunnen spiegelen, zodat je zelf beter in beeld komt. Het tekstgedeelte kun je dan eventueel iets smaller maken.
En deze zou je straks bijvoorbeeld kunnen maken met het XXL-Left of XXL-r Left thema, zodat menu links is. De tekst onderaan links zou naar een ExtraContent6 kunnen verhuizen, zoals ik hier heb gedaan met het zoekvenster. Of je zet dat in de gratis Floating Content Stack van Joost Spijker.

Met al dit soort oplossingen zorg je dat je beeld nergens leeg wordt en toch aantrekkelijk en niet rommelig.

fgrik · July 2012

ED proficiat met de site - mooi gedaan - de contactpagina vind ik heel geslaagd maar alle achtergrondfoto's komen mooi tot hun recht.

Contreras · July 2012

Hallo Henk,

Geweldig bedankt voor je compliment EN je hulp en ideeën.
De spanning rond een release komt idd overeen met een concert, dus succes!
Erg blij met je tips en gedachten zodat mijn site nog mooier kan worden.
Ben er heel erg blij mee.
Kan niet wachten op het vernieuwde thema.

Vriendelijke groet,

Ed

Contreras · July 2012

Henk,

Het vernieuwde XXL-r ziet er echt fantastisch uit!!
Ik ben er heel blij mee.
Bestaat er een mogelijkheid voor mij om in XXL-r de
containerwidth weer tot 1000px (of meer) te vergroten?
Dat zou mijn RW-leven helemaal geweldig maken.
Wanneer ik namelijk mijn homepage in de preview browsers
open dan loopt het menu over mijn gezicht. edwesterik.nl
In XXL 2 kon ik tot 1000px container maken,maar dan viel het
op de small devices buiten het beeld. Dit laatste is met het XXL-r
perfect opgelost. Alleen is de max. container width 800px.
Je snapt vast mijn probleem.

Vriendelijke groet,

Ed

Henk Vrieselaar · July 2012

Klopt, daar kreeg ik al meer verzoeken voor. In een update zal ik de breedtes 850px, 900px, 960px en 1000px toevoegen. Daar heb je nu even niets aan, maar als je me een emailtje stuurt, mail ik je een code toe die je in de Custom CSS kunt zetten zodat je een breedte van 1000px krijgt.
Wel is het natuurlijk zo dat bij kleiner maken van de browser het menu ook naar links gaat en dus bijvoorbeeld op een iPad je gezicht kan bedekken. De achtergrondfoto kun je namelijk niet responsieve maken (nou ja, dat kan wel maar dan krijg je een lachspiegel effect)

Henk Vrieselaar · July 2012

Ik heb je terug gemaild, maar krijg ze steeds onbestelbaar terug. Email-adres schijnt niet te kloppen... Dan hieronder de css voor 1000px (schrik niet). Kopieer dit en plak het in de Custom CSS:

#container,#pageHeader,#containerstrip {width: 1000px;}
#containerborder {width: 999px;}
#pageHeader img {padding-top: 10px;}
#myExtraContent7 {width: 999px;margin-top: 8px;}
#strip,#strip2,#borderstrip {margin-left: 1001px;}
#nav-wrap {margin-top: 0px;display: none;}
/* menu icon */
#sb-icon,#menu-icon {display: none; /* hide menu and sidebar icon initially */}
#nav ul {display: none; /* hide dropdown */}
@media screen and (max-width:1224px) {
#container,#pageHeader,#containerstrip{width: 880px;}
#containerborder{width: 879px;}
#strip,#strip2,#borderstrip {margin-left: 881px;}
#pageHeader h1,#pageHeader h2 {width: auto;}
#contentContainer #content {padding-left: 30px;padding-right: 30px;}
#myExtraContent7 {width: 879px;}}  
@media screen and (max-width:1024px) {
body {margin-left: 15px;}
#navcontainer {margin-top: 15px;}
#container,#pageHeader,#containerstrip{width: 625px;}
#containerborder {width: 624px;}
#strip,#strip2,#borderstrip {margin-left: 626px;}
#pageHeader h1,#pageHeader h2 {width: auto;}
#contentContainer #content {padding-left: 30px;padding-right: 30px;}
#myExtraContent2 {padding-top: 0px;margin-bottom: 4px;}
#myExtraContent7 {width: 624px;}}
@media screen and (max-width:768px) {
#pageHeader,#container {width: auto;}
#pageHeader h1,#pageHeader h2 {padding-left: 15px;padding-right: 15px;}
#contentContainer #content {padding-bottom: 7px;}
#pageHeader img{padding-left: 15px;}
#myExtraContent2{padding: 10px 15px 0;margin-bottom: 4px;}
#myExtraContent3{padding: 15px 15px 0;}
#myExtraContent1,#myExtraContent2{padding: 8px 15px;}
#container,#pageHeader,#containerstrip {width: 420px;}
#containerborder {width: 419px;}
#strip,#strip2,#borderstrip {margin-left: 421px;}
#contentContainer #content,
#footer p,#breadcrumbcontainer ul {padding-left: 15px;padding-right: 15px;}
#myExtraContent1 {padding-bottom: 0;padding-top: 15px;margin-bottom: 3px;}
#footer {padding-top: 5px;}
#breadcrumbcontainer {padding-top: 0;}
#myExtraContent7 {margin-left: 1px;margin-bottom: 6px;width: 419px;}}
@media screen and (max-width:600px) {
#container{border-top-style: solid;border-top-width: 1px;}
body {margin-left: 0;margin-top: 0px;}
input.form-input-field,textarea.form-input-field {width: 95%;}
#pageHeader {padding-top: 10px;}
#contentContainer{width:auto;padding-top: 12px;padding-bottom: 0px !important;}
#navcontainer{position: relative;display: block;padding: 10px 15px 0;top: 0;margin-top: 0;margin-bottom: 6px;}
#navcontainer a,#navcontainer ul ul a{line-height: 1.1;}
#pageHeader img{padding-top: 0;}
#contentContainer,#container,#pageHeader,#containerstrip,#containerborder {width: 100%;}
#containerborder{border-right-style: none;}
#contentContainer #content {padding: 0 15px 10px;}
#strip {margin-left: 0px;position: relative;top: 0;width: 100%;}
#strip2,#borderstrip {margin-left: 0px;position: relative;top: 0;width: 100%;border-right-style: none;}
#sidebarContainer {margin-top: 0px;width: 100%;margin-bottom: 0;padding: 0;}
#sidebarContainer #sidebar {padding: 0 15px;margin-bottom: 10px;margin-top: 3px;}
#myExtraContent5 {padding-bottom: 15px;padding-right: 15px;padding-left: 15px;}
#sidebarContainer .sideHeader {font-size: 14px;}
#myExtraContent6 {right: 0px;bottom: 0px;padding: 10px 15px 5px;position: relative;}
#footer {padding-top: 0px;padding-bottom: 3px;}
#myExtraContent2{padding-top: 10px;padding-bottom: 12px;}
#myExtraContent3{padding-top: 10px;padding-bottom: 12px;}
#myExtraContent4{margin-bottom: 0;padding: 10px 15px 5px;}
#myExtraContent1 {padding-top: 14px;}
#myExtraContent7 {margin-top: 5px;margin-bottom: 0;width: 100%;margin-left: 0;}
/* nav-wrap */
#nav-wrap {position: relative;height: 45px;display: block;}
/* menu icon */
#menu-icon {
   cursor: pointer;
    display: block;
	top: 0;
    font-size: 32px;
	text-transform: uppercase;
    line-height: 1.1;
	text-align: right;
    position: absolute;
	z-index: 100;
	right: 0px;
	padding: 5px 15px 5px 0;
	margin-bottom: 0;
	width: 50%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-shadow: 0 0px 3px rgba(0,0,0,0.35);}
#menu-icon:hover {}
#menu-icon.active {	text-shadow: none;}
#sb-icon {
    cursor: pointer;
    display: block;
	top: 0;
    font-size: 32px;
	text-transform: uppercase;
    line-height: 1.1;
	text-align: left;
    position: absolute;
	z-index: 100;
	left: 0px;
	padding: 5px 0 5px 15px;
	margin-bottom: 0;
	width: 50%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-shadow: 0 0px 3px rgba(0,0,0,0.35);
	background-color: transparent;}
#sb-icon:hover {background-color: transparent;}
#sb-icon.active {text-shadow: none;background-color: transparent;}
#navcontainer {display: none;}}
@media screen and (max-width: 480px) {
#contentContainer #content {padding-bottom: 12px;}
#myExtraContent2 {padding-top: 8px;padding-bottom: 14px;}}

Henk Vrieselaar · July 2012

En voor een 960px breedte:

#container,#pageHeader,#containerstrip {width: 960px;}
#containerborder {width: 959px;}
#pageHeader img {padding-top: 10px;}
#myExtraContent7 {width: 959px;margin-top: 8px;}
#strip,#strip2,#borderstrip {margin-left: 961px;}
#nav-wrap {margin-top: 0px;display: none;}
/* menu icon */
#sb-icon,#menu-icon {display: none; /* hide menu and sidebar icon initially */}
#nav ul {display: none; /* hide dropdown */}
@media screen and (max-width:1224px) {
#container,#pageHeader,#containerstrip{width: 880px;}
#containerborder{width: 879px;}
#strip,#strip2,#borderstrip {margin-left: 881px;}
#pageHeader h1,#pageHeader h2 {width: auto;}
#contentContainer #content {padding-left: 30px;padding-right: 30px;}
#myExtraContent7 {width: 879px;}}  
@media screen and (max-width:1024px) {
body {margin-left: 15px;}
#navcontainer {margin-top: 15px;}
#container,#pageHeader,#containerstrip{width: 625px;}
#containerborder {width: 624px;}
#strip,#strip2,#borderstrip {margin-left: 626px;}
#pageHeader h1,#pageHeader h2 {width: auto;}
#contentContainer #content {padding-left: 30px;padding-right: 30px;}
#myExtraContent2 {padding-top: 0px;margin-bottom: 4px;}
#myExtraContent7 {width: 624px;}}
@media screen and (max-width:768px) {
#pageHeader,#container {width: auto;}
#pageHeader h1,#pageHeader h2 {padding-left: 15px;padding-right: 15px;}
#contentContainer #content {padding-bottom: 7px;}
#pageHeader img{padding-left: 15px;}
#myExtraContent2{padding: 10px 15px 0;margin-bottom: 4px;}
#myExtraContent3{padding: 15px 15px 0;}
#myExtraContent1,#myExtraContent2{padding: 8px 15px;}
#container,#pageHeader,#containerstrip {width: 420px;}
#containerborder {width: 419px;}
#strip,#strip2,#borderstrip {margin-left: 421px;}
#contentContainer #content,
#footer p,#breadcrumbcontainer ul {padding-left: 15px;padding-right: 15px;}
#myExtraContent1 {padding-bottom: 0;padding-top: 15px;margin-bottom: 3px;}
#footer {padding-top: 5px;}
#breadcrumbcontainer {padding-top: 0;}
#myExtraContent7 {margin-left: 1px;margin-bottom: 6px;width: 419px;}}
@media screen and (max-width:600px) {
#container{border-top-style: solid;border-top-width: 1px;}
body {margin-left: 0;margin-top: 0px;}
input.form-input-field,textarea.form-input-field {width: 95%;}
#pageHeader {padding-top: 10px;}
#contentContainer{width:auto;padding-top: 12px;padding-bottom: 0px !important;}
#navcontainer{position: relative;display: block;padding: 10px 15px 0;top: 0;margin-top: 0;margin-bottom: 6px;}
#navcontainer a,#navcontainer ul ul a{line-height: 1.1;}
#pageHeader img{padding-top: 0;}
#contentContainer,#container,#pageHeader,#containerstrip,#containerborder {width: 100%;}
#containerborder{border-right-style: none;}
#contentContainer #content {padding: 0 15px 10px;}
#strip {margin-left: 0px;position: relative;top: 0;width: 100%;}
#strip2,#borderstrip {margin-left: 0px;position: relative;top: 0;width: 100%;border-right-style: none;}
#sidebarContainer {margin-top: 0px;width: 100%;margin-bottom: 0;padding: 0;}
#sidebarContainer #sidebar {padding: 0 15px;margin-bottom: 10px;margin-top: 3px;}
#myExtraContent5 {padding-bottom: 15px;padding-right: 15px;padding-left: 15px;}
#sidebarContainer .sideHeader {font-size: 14px;}
#myExtraContent6 {right: 0px;bottom: 0px;padding: 10px 15px 5px;position: relative;}
#footer {padding-top: 0px;padding-bottom: 3px;}
#myExtraContent2{padding-top: 10px;padding-bottom: 12px;}
#myExtraContent3{padding-top: 10px;padding-bottom: 12px;}
#myExtraContent4{margin-bottom: 0;padding: 10px 15px 5px;}
#myExtraContent1 {padding-top: 14px;}
#myExtraContent7 {margin-top: 5px;margin-bottom: 0;width: 100%;margin-left: 0;}
/* nav-wrap */
#nav-wrap {position: relative;height: 45px;display: block;}
/* menu icon */
#menu-icon {
   cursor: pointer;
    display: block;
	top: 0;
    font-size: 32px;
	text-transform: uppercase;
    line-height: 1.1;
	text-align: right;
    position: absolute;
	z-index: 100;
	right: 0px;
	padding: 5px 15px 5px 0;
	margin-bottom: 0;
	width: 50%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-shadow: 0 0px 3px rgba(0,0,0,0.35);}
#menu-icon:hover {}
#menu-icon.active {	text-shadow: none;}
#sb-icon {
    cursor: pointer;
    display: block;
	top: 0;
    font-size: 32px;
	text-transform: uppercase;
    line-height: 1.1;
	text-align: left;
    position: absolute;
	z-index: 100;
	left: 0px;
	padding: 5px 0 5px 15px;
	margin-bottom: 0;
	width: 50%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-shadow: 0 0px 3px rgba(0,0,0,0.35);
	background-color: transparent;}
#sb-icon:hover {background-color: transparent;}
#sb-icon.active {text-shadow: none;background-color: transparent;}
#navcontainer {display: none;}}
@media screen and (max-width: 480px) {
#contentContainer #content {padding-bottom: 12px;}
#myExtraContent2 {padding-top: 8px;padding-bottom: 14px;}}

Contreras · July 2012

Hallo Henk,

Echt super!!!!!
Ben er dolgelukkig mee.

Ed Westerik

Contreras · July 2012

Hallo Henk,

Telkens wanneer ik XXL-r open (vooral in preview binnen RW en regelmatig online) krijg ik eerst kort het "beginthema" uit RW te zien- een soort korte "flash"- (dus de groen/blauwe versie).
Mijn site komt er daarna wel snel overheen. Ik weet niet of dat in RW zit of in de combinatie van RW en het thema.
Misschien ben ik de eerste/enige,...
Het thema krijgt van alle kanten (vrienden en klanten) veel lof!
edwesterik.nl

vriendelijke groet,
Ed Westerik

Henk Vrieselaar · July 2012

Telkens wanneer ik XXL-r open (vooral in preview binnen RW en regelmatig online) krijg ik eerst kort het "beginthema" uit RW te zien- een soort korte "flash"- (dus de groen/blauwe versie).

Dat hangt af van de snelheid van je verbinding. Eerst laadt de achtergrond en onmiddelijk (of bijna tegelijkertijd) ook de foto. Als een foto 'zwaar' is (zoals die van jou: 1630px breed!) zal die langzamer laden. Die achtergrondkleur kun je instellen in Theme Styles > Background-Color. Maak die bv. zwart of pak een kleur die ongeveer overeenkomt met de hoofdkleur van je foto (de grijze achtergrond).

Als je de foto 'kleiner' maakt, dus bij voorkeur 1024 x 768px of 1200 x 960px en bewaart voor het web zul je zien dat je die 'flits' nauwelijks of niet ziet. En samen met een andere achtergrond kleur valt het niet meer op.

Contreras · July 2012

Hallo Henk,

Achtergrondkleuren aangepast!
Het is vooral die totaal andere kleur die opvalt.
Met aangepaste kleuren is ook dit "probeempje" weer supersnel opgelost.

Wederom dank voor je snelle reactie!

Ed

Realmac Software

HV XXL2 Theme

Comments

Leave a Comment