Squarespace Seite aufbohren?

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1255

05.03.2014 - 15:42

Ich hätte auf unserem Blog rechts neben der Lupe gerne einen Facebook Link integriert.

Nun gibt es bei Squarespace das Problem, dass man relativ wenig Handlungsspielraum hat.
Man kann nur über ne css injection, oder eine injection in den body Veränderungen vornehmen.

Via css habe ich es schon geschafft die vordefinierten Such- und Mail-Icons gleichzeitig übereinander anzeigen zu lassen.
(Das deaktivierte aktivieren und eins der beiden top und eines bottom stellen.)
Dies hat aber zur Folge, dass beim runterscrollen beide Symbole übereinander rutschen.
Mittels Html habe ich es geschaft einen Facebook Link zu integrieren,
der aber egal was ich mache im linken oberen Eck picken bleibt...

Das Problem ist, dass jeglicher code immer an die anfangsposition des Bodys gesetzt wird.

Habt ihr eine Idee wie ich es dennoch schaffen könnte?

Bearbeitet von slateSC am 05.03.2014, 17:07

Daeda

Here to stay

Registered: Aug 2007
Location: Graz
Posts: 1539

05.03.2014 - 16:57

Hm ich kannte Squarespace vorher noch gar nicht, aber das erste was einem auf deren Seite ins Auge springt:
WEBSITES•DOMAINS•COMMERCE•MOBILE•24/7 SUPPORT

Hast den Support schon gefragt? Scheint ja immerhin kostenpflichtig zu sein.

Ohne das System zu kennen, wird das nicht leicht. Ich könnte mir dort heut Abend mal einen Trial-Account machen und mir das ansehen, falls dir bis dahin niemand helfen konnte.

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1255

05.03.2014 - 17:04

Der Support ist grundsätzlich super, gibt aber verständlicherweise
keine Auskünfte zur umprogrammierung ihrer Templates.
Da das verändern ja auf eigene Gefahr/Verantwortung geschieht.
Sie haben mir nur den Link zum css Tutorial geschickt.
(Der Support ist kostenlos, wenn man Mail oder den Chat wählt.)

Würde mich natürlich freuen wenn du mir helfen könntest.

Ps.: wir nutzen das Adirondack Template.
Es gibt je nach Template teilweise verschiedene Einstellmöglichkeiten.

PPs.: Das direkte verknüpfen mit einem Facebookaccount,
welches Squarespace anbiedtet, würde ich sehr gerne vermeiden!
Die Daten tauchen nämlich im Quellcode und sonstwo auf...
Ich bin eher für nen guten alten "a href"

Bearbeitet von slateSC am 05.03.2014, 17:15

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

05.03.2014 - 17:14

Hm, in der Doku steht, dass du eigentlich an beliebiger Stelle statt einem Inhaltselement auch einfach eigenen HTML Code einfügen kannst. Aber evt. hängt das auch vom verwendeten Template ab.

http://help.squarespace.com/guides/about-the-code-block

Wobei das nur für die Content Area gilt, das was du haben willst ist aber außerhalb der Content Area, soweit ich das verstehe?

Daeda

Here to stay

Registered: Aug 2007
Location: Graz
Posts: 1539

05.03.2014 - 17:15

Ah sorry, hab nicht kostenpflichtigen Support gemeint, sondern dass das Angebot an sich nicht gratis ist

Zitat
... gibt aber verständlicherweise keine Auskünfte zur umprogrammierung ihrer Templates.
Da das Verändern ja auf eigene Gefahr/Verantwortung geschieht.

Klingt so, als wär es definitiv möglich, Veränderungen durchzuführen. Kommt die Aussage von denen oder von dir?

Verständnisfrage:
Warum eigentlich squarespace? Ich finde die Preis/Leistung ziemlich mies. Und den e-commerce Teil scheint ihr ja nichtmal zu nutzen.

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1255

05.03.2014 - 17:24

@Spikx: stimmt genau.

@Daeda: Das war die Auskunft vom Support.
Veränderungen sind möglich, (html, css) allerdings nur an den von Squarespace vorgegebenen stellen.

Wir wollten diesmal kein eigenens CMS aufstellen und wieder unmengen an Arbeitszeit reinstecken.
Squarespace ist vom Handling her und der Effizienz ein Traum.
Du kannst innerhalb eines halben Tages eine Seite aufsetzen, die auf allen
Geräten gleichermaßen funktioniert.
Die einzige Schwierigkeit ist, wenn man etwas möchte das im Template nicht vorgesehen ist.

Und E-commerce kann ja noch werden sobald der traffic passt.

Edit: O-Ton

You can have social media icons on your site by adding them in Settings > Connected Accounts. By default it appears in the footer of your site, and with this template the only way to move it elsewhere (like by the Search icon) would be to use custom CSS.

If you have coding knowledge, you can write the CSS for this and add it to your style sheet using the CSS button at the bottom of your Style Editor (paintbrush icon). See the following guide:

http://help.squarespace.com/guides/using-the-css-editor

As a note, this is an advanced modification and we're unable to offer assistance with this setup, or any third-party code modification or addition.

Bearbeitet von slateSC am 05.03.2014, 17:33

Daeda

Here to stay

Registered: Aug 2007
Location: Graz
Posts: 1539

05.03.2014 - 17:40

HTML

Code: PHP

<div class="custom-fb-area">.. inhalt ..</div>

CSS

Code: PHP

.custom-fb-area {
position: absolute;
top: -180px;
right: 0;
z-index: 1800;
height: 40px;
width: 40px;
}

Das sollte funktionieren - die Werte bei top, right, height und width musst du noch nach deinen Ansprüchen anpassen.

/edit
Ah okay, dein edit hab ich jetzt erst gesehen. Wenn du den systemeigenen Button mal aktivierst, können wir dir einfach das passende css geben, damits oben rechts erscheint.

Bearbeitet von Daeda am 05.03.2014, 17:42

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1255

05.03.2014 - 17:45

Sieht schon mal besser aus als das was ich fabriziert habe.
Ich probiers gleich mal!

Meinst du den Vordeffinierten Mail Button?

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1255

05.03.2014 - 17:51

So sah der css Code aus mit dem ich beide Symbole anzeigen konnte:

Code: PHP

#search, #search-mobile {
    display: table-cell;
    line-height: 1px;
    text-align: right;
    transition: top 0.4s ease 0s, color 0.14s ease 0s;
    vertical-align: top;
    visibility: hidden;
}
.header-dropdown-contact-or-location-search #email, .header-dropdown-contact-or-location-search #email-mobile {
    display: table-cell;
}
#email {
    display: table-cell;
    line-height: 1px;
    text-align: right;
    transition: top 0.4s ease 0s, color 0.14s ease 0s;
    vertical-align: bottom;
    visibility: visible;
}

und mit dem habe ich den Button eingebunden:
(Allerdings wurde der div immer am Anfang des Body gesetzt und nicht dorthin wo die anderen icons stecken)

Code: PHP

<div id="2rminfacebook">
 <a href="https://www.facebook.com/2rmincom?ref=hl"><img src="http://p3277-cent-01.dmz.ufg.ac.at/~lv500003/gruppe4/m1175136/2rmin_facebook.gif" width="26" height="26" border="0" alt="Facebook">
</a>
</div>

Bearbeitet von slateSC am 05.03.2014, 17:53

Daeda

Here to stay

Registered: Aug 2007
Location: Graz
Posts: 1539

05.03.2014 - 18:29

Zitat von slateSC
Sieht schon mal besser aus als das was ich fabriziert habe.
Ich probiers gleich mal!

Meinst du den Vordeffinierten Mail Button?

Wenn der Mail Button einer der Social Buttons ist, ja: "You can have social media icons on your site by adding them in Settings > Connected Accounts."

Wenn du dort mal bei Facebook was eintragst, sollte ja unten rechts der Button erscheinen. Mit Custom CSS kann man den dann oben rechts platzieren.

Oder du nimmst deinen #2rminfacebook - Button, dafür sollte mein CSS von vorhin schon annähernd passen.

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1255

05.03.2014 - 18:45

Ich kann es leider erst später versuchen.

Aber das Problem mit dem integrierten FB Button, der weiter unten erscheint
ist, dass man sich mit seinem privaten Account connecten muss.
Und das würde ich gerne vermeiden.

Edit:
Ich habs jetzt mit deinem code probiert:

Code: PHP

.custom-fb-area { 
position: absolute; 
top: 48px; 
right: 5px; 
z-index: 1800; 
height: 26px; 
width: 26px; 
}

Mit diesen Einstellungen bleibt das Logo allerdings statisch am rechten Rand und verschwindet hinter der weißen Fläche wenn man das Fenster
kleiner zieht.

Bearbeitet von slateSC am 05.03.2014, 21:14

Daeda

Here to stay

Registered: Aug 2007
Location: Graz
Posts: 1539

06.03.2014 - 16:32

Ah okay, es wird also doch nicht im Content sondern etwas davor eingefügt. Da fehlt ihm jetzt der container des Templates rundherum. Sollte dann so aussehen:

Code: PHP

<div class="outer-wrapper">
  <div class="custom-fb-area">FB Stuff</div>
</div>

Im css muss jetzt der z-index 1801 oder höher sein.

Aber da beim kleiner ziehen des Fensters die Lupe irgendwann ganz rechts am Rand ankommt, hat daneben nichts mehr Platz. Drum würd ichs eher ganz links platzieren. Damit bei kleineren Auflösungen der Abstand gleich wie beim Rest der Seite ist, muss noch ein media-query eingefügt werden:

Code: PHP

.custom-fb-area {
  position: absolute;
  top: 47px;
  left: 75px;
  z-index: 1801;
  height: 26px;
  width: 26px;
}
@media only screen and (max-width: 1100px) {
  .custom-fb-area {
    left: 5%;
  }
}

Bei mobile-devices bzw. Fenstergrößen <640px verschwindets aber unter dem Button für die touch-navigation.

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1255

06.03.2014 - 17:59

habs gerade versucht:
er hat den outer wrapper mit einer eigenen id versehen und diesen wieder ganz an den Anfang gestellt...

Eigentlich sollte das ganze ja hier rein!?

Code: PHP

<div class="info-title-email-wrapper">

Geht es eigentlich (laut gedacht) dass man den Mailbutton
(mit php oder whatever) etwas anderes zuweist?
Und so aus dem den FB Button macht?

Firebug:

Edit: Just 4 info - für die Zeile mit dem @media zeigt er mir einen syntax error an!?

Bearbeitet von slateSC am 06.03.2014, 18:12

Daeda

Here to stay

Registered: Aug 2007
Location: Graz
Posts: 1539

06.03.2014 - 18:22

Ach herrje, jetzt hat er den Code ja im html-head platziert .. das haut alles übern Haufen ^^

Zitat
Geht es eigentlich (laut gedacht) dass man den Mailbutton
(mit php oder whatever) etwas anderes zuweist?
Und so aus dem den FB Button macht?

Theoretisch ja, aber sowas unterbindet das System bestimmt.

slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1255	05.03.2014 - 15:42 Ich hätte auf unserem Blog rechts neben der Lupe gerne einen Facebook Link integriert. Nun gibt es bei Squarespace das Problem, dass man relativ wenig Handlungsspielraum hat. Man kann nur über ne css injection, oder eine injection in den body Veränderungen vornehmen. Via css habe ich es schon geschafft die vordefinierten Such- und Mail-Icons gleichzeitig übereinander anzeigen zu lassen. (Das deaktivierte aktivieren und eins der beiden top und eines bottom stellen.) Dies hat aber zur Folge, dass beim runterscrollen beide Symbole übereinander rutschen. Mittels Html habe ich es geschaft einen Facebook Link zu integrieren, der aber egal was ich mache im linken oberen Eck picken bleibt... Das Problem ist, dass jeglicher code immer an die anfangsposition des Bodys gesetzt wird. Habt ihr eine Idee wie ich es dennoch schaffen könnte? Bearbeitet von slateSC am 05.03.2014, 17:07
Daeda Here to stay Registered: Aug 2007 Location: Graz Posts: 1539	05.03.2014 - 16:57 Hm ich kannte Squarespace vorher noch gar nicht, aber das erste was einem auf deren Seite ins Auge springt: WEBSITES•DOMAINS•COMMERCE•MOBILE•24/7 SUPPORT Hast den Support schon gefragt? Scheint ja immerhin kostenpflichtig zu sein. Ohne das System zu kennen, wird das nicht leicht. Ich könnte mir dort heut Abend mal einen Trial-Account machen und mir das ansehen, falls dir bis dahin niemand helfen konnte.
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1255	05.03.2014 - 17:04 Der Support ist grundsätzlich super, gibt aber verständlicherweise keine Auskünfte zur umprogrammierung ihrer Templates. Da das verändern ja auf eigene Gefahr/Verantwortung geschieht. Sie haben mir nur den Link zum css Tutorial geschickt. (Der Support ist kostenlos, wenn man Mail oder den Chat wählt.) Würde mich natürlich freuen wenn du mir helfen könntest. Ps.: wir nutzen das Adirondack Template. Es gibt je nach Template teilweise verschiedene Einstellmöglichkeiten. PPs.: Das direkte verknüpfen mit einem Facebookaccount, welches Squarespace anbiedtet, würde ich sehr gerne vermeiden! Die Daten tauchen nämlich im Quellcode und sonstwo auf... Ich bin eher für nen guten alten "a href" Bearbeitet von slateSC am 05.03.2014, 17:15
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	05.03.2014 - 17:14 Hm, in der Doku steht, dass du eigentlich an beliebiger Stelle statt einem Inhaltselement auch einfach eigenen HTML Code einfügen kannst. Aber evt. hängt das auch vom verwendeten Template ab. http://help.squarespace.com/guides/about-the-code-block Wobei das nur für die Content Area gilt, das was du haben willst ist aber außerhalb der Content Area, soweit ich das verstehe?
Daeda Here to stay Registered: Aug 2007 Location: Graz Posts: 1539	05.03.2014 - 17:15 Ah sorry, hab nicht kostenpflichtigen Support gemeint, sondern dass das Angebot an sich nicht gratis ist Zitat ... gibt aber verständlicherweise keine Auskünfte zur umprogrammierung ihrer Templates. Da das Verändern ja auf eigene Gefahr/Verantwortung geschieht. Klingt so, als wär es definitiv möglich, Veränderungen durchzuführen. Kommt die Aussage von denen oder von dir? Verständnisfrage: Warum eigentlich squarespace? Ich finde die Preis/Leistung ziemlich mies. Und den e-commerce Teil scheint ihr ja nichtmal zu nutzen.
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1255	05.03.2014 - 17:24 @Spikx: stimmt genau. @Daeda: Das war die Auskunft vom Support. Veränderungen sind möglich, (html, css) allerdings nur an den von Squarespace vorgegebenen stellen. Wir wollten diesmal kein eigenens CMS aufstellen und wieder unmengen an Arbeitszeit reinstecken. Squarespace ist vom Handling her und der Effizienz ein Traum. Du kannst innerhalb eines halben Tages eine Seite aufsetzen, die auf allen Geräten gleichermaßen funktioniert. Die einzige Schwierigkeit ist, wenn man etwas möchte das im Template nicht vorgesehen ist. Und E-commerce kann ja noch werden sobald der traffic passt. Edit: O-Ton You can have social media icons on your site by adding them in Settings > Connected Accounts. By default it appears in the footer of your site, and with this template the only way to move it elsewhere (like by the Search icon) would be to use custom CSS. If you have coding knowledge, you can write the CSS for this and add it to your style sheet using the CSS button at the bottom of your Style Editor (paintbrush icon). See the following guide: http://help.squarespace.com/guides/using-the-css-editor As a note, this is an advanced modification and we're unable to offer assistance with this setup, or any third-party code modification or addition. Bearbeitet von slateSC am 05.03.2014, 17:33
Daeda Here to stay Registered: Aug 2007 Location: Graz Posts: 1539	05.03.2014 - 17:40 HTML Code: PHP `<div class="custom-fb-area">.. inhalt ..</div>` CSS Code: PHP `.custom-fb-area { position: absolute; top: -180px; right: 0; z-index: 1800; height: 40px; width: 40px; }` Das sollte funktionieren - die Werte bei top, right, height und width musst du noch nach deinen Ansprüchen anpassen. /edit Ah okay, dein edit hab ich jetzt erst gesehen. Wenn du den systemeigenen Button mal aktivierst, können wir dir einfach das passende css geben, damits oben rechts erscheint. Bearbeitet von Daeda am 05.03.2014, 17:42
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1255	05.03.2014 - 17:45 Sieht schon mal besser aus als das was ich fabriziert habe. Ich probiers gleich mal! Meinst du den Vordeffinierten Mail Button?
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1255	05.03.2014 - 17:51 So sah der css Code aus mit dem ich beide Symbole anzeigen konnte: Code: PHP `#search, #search-mobile { display: table-cell; line-height: 1px; text-align: right; transition: top 0.4s ease 0s, color 0.14s ease 0s; vertical-align: top; visibility: hidden; } .header-dropdown-contact-or-location-search #email, .header-dropdown-contact-or-location-search #email-mobile { display: table-cell; } #email { display: table-cell; line-height: 1px; text-align: right; transition: top 0.4s ease 0s, color 0.14s ease 0s; vertical-align: bottom; visibility: visible; }` und mit dem habe ich den Button eingebunden: (Allerdings wurde der div immer am Anfang des Body gesetzt und nicht dorthin wo die anderen icons stecken) Code: PHP `<div id="2rminfacebook"> <a href="https://www.facebook.com/2rmincom?ref=hl"><img src="http://p3277-cent-01.dmz.ufg.ac.at/~lv500003/gruppe4/m1175136/2rmin_facebook.gif" width="26" height="26" border="0" alt="Facebook"> </a> </div>` Bearbeitet von slateSC am 05.03.2014, 17:53
Daeda Here to stay Registered: Aug 2007 Location: Graz Posts: 1539	05.03.2014 - 18:29 Zitat von slateSC Sieht schon mal besser aus als das was ich fabriziert habe. Ich probiers gleich mal! Meinst du den Vordeffinierten Mail Button? Wenn der Mail Button einer der Social Buttons ist, ja: "You can have social media icons on your site by adding them in Settings > Connected Accounts." Wenn du dort mal bei Facebook was eintragst, sollte ja unten rechts der Button erscheinen. Mit Custom CSS kann man den dann oben rechts platzieren. Oder du nimmst deinen #2rminfacebook - Button, dafür sollte mein CSS von vorhin schon annähernd passen.
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1255	05.03.2014 - 18:45 Ich kann es leider erst später versuchen. Aber das Problem mit dem integrierten FB Button, der weiter unten erscheint ist, dass man sich mit seinem privaten Account connecten muss. Und das würde ich gerne vermeiden. Edit: Ich habs jetzt mit deinem code probiert: Code: PHP `.custom-fb-area { position: absolute; top: 48px; right: 5px; z-index: 1800; height: 26px; width: 26px; }` Mit diesen Einstellungen bleibt das Logo allerdings statisch am rechten Rand und verschwindet hinter der weißen Fläche wenn man das Fenster kleiner zieht. Bearbeitet von slateSC am 05.03.2014, 21:14
Daeda Here to stay Registered: Aug 2007 Location: Graz Posts: 1539	06.03.2014 - 16:32 Ah okay, es wird also doch nicht im Content sondern etwas davor eingefügt. Da fehlt ihm jetzt der container des Templates rundherum. Sollte dann so aussehen: Code: PHP `<div class="outer-wrapper"> <div class="custom-fb-area">FB Stuff</div> </div>` Im css muss jetzt der z-index 1801 oder höher sein. Aber da beim kleiner ziehen des Fensters die Lupe irgendwann ganz rechts am Rand ankommt, hat daneben nichts mehr Platz. Drum würd ichs eher ganz links platzieren. Damit bei kleineren Auflösungen der Abstand gleich wie beim Rest der Seite ist, muss noch ein media-query eingefügt werden: Code: PHP `.custom-fb-area { position: absolute; top: 47px; left: 75px; z-index: 1801; height: 26px; width: 26px; } @media only screen and (max-width: 1100px) { .custom-fb-area { left: 5%; } }` Bei mobile-devices bzw. Fenstergrößen <640px verschwindets aber unter dem Button für die touch-navigation.
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1255	06.03.2014 - 17:59 habs gerade versucht: er hat den outer wrapper mit einer eigenen id versehen und diesen wieder ganz an den Anfang gestellt... Eigentlich sollte das ganze ja hier rein!? Code: PHP `<div class="info-title-email-wrapper">` Geht es eigentlich (laut gedacht) dass man den Mailbutton (mit php oder whatever) etwas anderes zuweist? Und so aus dem den FB Button macht? Firebug: Edit: Just 4 info - für die Zeile mit dem @media zeigt er mir einen syntax error an!? Bearbeitet von slateSC am 06.03.2014, 18:12
Daeda Here to stay Registered: Aug 2007 Location: Graz Posts: 1539	06.03.2014 - 18:22 Ach herrje, jetzt hat er den Code ja im html-head platziert .. das haut alles übern Haufen ^^ Zitat Geht es eigentlich (laut gedacht) dass man den Mailbutton (mit php oder whatever) etwas anderes zuweist? Und so aus dem den FB Button macht? Theoretisch ja, aber sowas unterbindet das System bestimmt.

Squarespace Seite aufbohren?

Forum Index > Software > Coding Stuff

slateSC

Daeda

slateSC

Spikx

Daeda

slateSC

Daeda

slateSC

slateSC

Daeda

slateSC

Daeda

slateSC

Daeda