wie icons beschriften und untereinander? Theme Architecture

gericoach

Ich versuche, die Sprachlink-Icons im Header von http://casaverania.com untereinander zu setzen statt nebeneinander und sie jeweils zu labeln (siehe Bild).
Leider zerschieße ich mir laufend die Seite. Die Drei sind eigentlich Social-Icons, die in den Themeoptions hinterlegt sind. Habe die Bilder gewechselt und die Links entsprechend vergeben.
Habe versucht, hinter den jeweiligen Aufruf in der header.php, ein echo zu setzen, was aber wohl Quark war.
Hat jemand einen Vorschlag für mich?

Innerhalb body-tag:

PHP

<?php                 
                        // Get Social Icons
                        $gdl_icon_type = get_option(THEME_SHORT_NAME.'_header_icon_type', 'light');
                        $gdl_social_icon = array(
                            'delicious'=> array('name'=>THEME_SHORT_NAME.'_delicious', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/delicious.png'),
                            'deviantart'=> array('name'=>THEME_SHORT_NAME.'_deviantart', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/deviantart.png'),
                            'digg'=> array('name'=>THEME_SHORT_NAME.'_digg', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/digg.png'),
                            'facebook' => array('name'=>THEME_SHORT_NAME.'_facebook', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/facebook.png'),
                            'flickr' => array('name'=>THEME_SHORT_NAME.'_flickr', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/flickr.png'),
                            'lastfm'=> array('name'=>THEME_SHORT_NAME.'_lastfm', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/lastfm.png'),
                            'linkedin' => array('name'=>THEME_SHORT_NAME.'_linkedin', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/linkedin.png'),
                            'picasa'=> array('name'=>THEME_SHORT_NAME.'_picasa', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/picasa.png'),
                            'rss'=> array('name'=>THEME_SHORT_NAME.'_rss', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/rss.png'),
                            'stumble-upon'=> array('name'=>THEME_SHORT_NAME.'_stumble_upon', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/stumble-upon.png'),
                            'skype'=> array('name'=>THEME_SHORT_NAME.'_skype', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/skype.png'),
                            'tumblr'=> array('name'=>THEME_SHORT_NAME.'_tumblr', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/tumblr.png'),
                            'twitter' => array('name'=>THEME_SHORT_NAME.'_twitter', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/twitter.png'),
                            'vimeo' => array('name'=>THEME_SHORT_NAME.'_vimeo', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/vimeo.png'),
                            'youtube' => array('name'=>THEME_SHORT_NAME.'_youtube', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/youtube.png'),
                            'google_plus' => array('name'=>THEME_SHORT_NAME.'_google_plus', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/google-plus.png'),
                            'email' => array('name'=>THEME_SHORT_NAME.'_email', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/email.png'),
                            'pinterest' => array('name'=>THEME_SHORT_NAME.'_pinterest', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social-icon/pinterest.png')
                        );                
                        
                        echo '<div id="gdl-social-icon" class="social-wrapper">';
                        echo '<div class="social-icon-wrapper">';
                        foreach( $gdl_social_icon as $social_name => $social_icon ){
                            $social_link = get_option($social_icon['name']);
                            
                            if( !empty($social_link) ){
                                echo '<div class="social-icon"><a target="_blank" href="' . $social_link . '">' ;
                                echo '<img src="' . $social_icon['url'] . '" alt="' . $social_name . '"/>';
                                echo '</a></div>';
                            }
                        }
                        echo '</div>'; // social icon wrapper
                        echo '</div>'; // social wrapper                    
                    ?>

Alles anzeigen

Codebeispiel in der Optionspage (nur die ersten 3):

PHP

'gdl_panel_social_network' => array( 
            __('DELICIOUS', 'gdl_back_office')=>array('type'=>'inputtext','name'=>THEME_SHORT_NAME.'_delicious',
                'description'=>'Place the link you want and delicious icon will appear. To remove it, just leave it blank.'),    
            __('DEVIANTART', 'gdl_back_office')=>array('type'=>'inputtext','name'=>THEME_SHORT_NAME.'_deviantart',
                'description'=>'Place the link you want and deviantart icon will appear. To remove it, just leave it blank.'),

Originaltheme: http://demo.goodlayers.com/?theme=architecture

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

die Links kannst in den Options einfügen => richtig

Sprachenlinks sind dochmeist dynamisch,
d.h. bin ich auf Unterseite X schickt mich der Sprachenlink zur Unterseite X in Englisch

wie kannst das mit deiner Methode umsetzen?

und die Fahnen setze mit CSS und der Pseudoklasse "before"

gericoach

in den options sind die social links so aufgeführt, dass sie noch ihren link bekommen. Also habe ich ne Multisite gemacht und die jeweiligen links zu den andersprachigen seiten rein geschrieben. Und eben die Bilder (FB, Twitter usw.) gegen Flags ausgetauscht. Also relativ easy. Die Fahnen sind doch schon drin. Ich möchte (s. Bild) nach den Flaggen English, Espanol und Deutsch als Schrift haben und die 3 untereinander statt nebeneinander.
Es geht also um ne Erweiterung durch Label und neupositionierung der Drei.

Monika

ja die Labels kannst auch mit der Pseudoklasse after hinschreiben

eine gute Erklärung mit Beispielen fand ich hier
und die Links kannst du per URL ansprechen

wie das geht erklärt Justin hier

http://justintadlock.com/archives/2013/…av-menus-part-2

gericoach

danke für die Mühen. Verstehe ich dich richtig, dass du empfielst, es komplett neu zu bauen? Wäre mir natürlich lieber, auf Basis des Vorhandenen zu agieren...

Monika

css Regeln

kein Eingriff in die Templates nötig

sprichst du via css die "URL" an, überschreibst du leicht nur das was du magst und brauchst die anderen ICONs vermutlich per CSS gar nicht anfassen
außer du magst sie wirklich so in der letzten Reihe

aber gut, wer hochkomplexes mag, sollt es haben;
unabhängig, dass ich den Bruch im Layout bei den ICONS nicht ganz verstehe, aber muss ich ja auch nicht :-)

als "solide css Bauerin" tät ichs so mit "gefakten Tabellen via CSS" umsetzn
sonst brauchst position absolute um die anderen ICONs unten zu halten oder die anderen hochzuschieben

position absolute und mobil ist immer ein Quircks :(

gericoach

Du sprichst (schreibst) in Rätseln. Ist das Ösi-deutsch :) ?

Zitat

aber gut, wer hochkomplexes mag, sollt es haben;
unabhängig, dass ich den Bruch im Layout bei den ICONS nicht ganz verstehe, aber muss ich ja auch nicht

welchen Bruch meinst du? Habe ldiglich die vorhandenen Social Icons neu definiert um eben nicht am Code fummeln zu müssen.

Zitat

sprichst du via css die "URL" an, überschreibst du leicht nur das was du magst und brauchst die anderen ICONs vermutlich per CSS gar nicht anfassen
außer du magst sie wirklich so in der letzten Reihe

Häää? :) Auch das verstehe ich nicht so ganz (garnicht)

Hier übrigens der style der social icons:

Zitat

/*--- social icon ---*/
div.social-wrapper { float: left; }
div.social-icon { float: left; margin-right: 10px; cursor: pointer; margin-top: 30px; }
div.social-icon:last-child { margin-right: 0px; }

Monika

lies den Artikel von Justin Tadlock

da wird beschrieben wie du eine URL anhand ihrer "Adresse" via CSS gstalten kannst

das was du da haben magst ist "nichts einfaches CSS"

drei Icons untereinander die anderen in derselben Linie wie das letzte ICON das untereinander ist

das "malt" sich rasch, ist aber nicht einfach :-)

gericoach

Zitat

das "malt" sich rasch, ist aber nicht einfach :smile:

Yep, da verstehe ich Dich zu 100%. Mein Bruder (der "Auftraggeber") hätte gerne diese "kleine Änderung" asap. Danke für den Link.

SirEctor

Nur ganz grob, wenn es nicht dynamisch sein soll:

CSS

.social-icon {
    float:none;width:100%;
    margin:0 !important;
}
.social-icon:nth-child(3), .social-icon:nth-child(4), .social-icon:nth-child(5) {
    float: left;
    width: auto;
}
.social-icon:nth-child(4), .social-icon:nth-child(5) {
    margin-top: -30px !important;
    margin-left: 15px !important;
}

Alles anzeigen

Fehlt natürlich noch der Teil für mobile Endgeräte.

SirEctor

Jetzt sind die Icons weg. Wollte gerade noch mal bzgl. der Beschriftung schauen....

Edit:
Versuch es mal nach diesem Schema

Code

.social-icon:nth-child(1):after, .social-icon:nth-child(2):after, .social-icon:nth-child(3):after{content:"test";display:inline-block;padding-left:1em;}

gericoach

Danke Sir! Hatte es noch nicht umgesetzt. Mein Versuch, es via "neues Menü" und "before/after" sieht mistig aus und hat nicht das gebracht, was ich haben wollte siehe link

Deinen 2. Anlauf habe ich nicht verstanden...werde mal Teil 1 umsetzen. War Teil 1 nur ein grobes Muster oder bezog er sich konkret auf die Seite/style.css?

Monika

ich weiß, es soll nebeneinander stehen
aber so siehts doch gut aus

eindeutig besser als nebeneinander
weil es ein "gewohntes Pattern" nun ist

gericoach

Ja Monika, ist schon ganz nett anzusehen. Nun wird aber das Logo nach unten gedrückt und damit der Background, weil die UL der Icons über die volle Breite geht. Hatte dem logo schon einen hohen z-index gegeben, leider völlig ohne Wirkung.

Monika

naja dann beschränk den umspannenden Container in seiner Breite

gericoach

er ist bei 550px, das logo lässt sich aber nicht nach oben schieben.

SirEctor

gib dem Logo einfach ein margin-top:-20px; oder ähnlich

Edit: oder du gibst dem #menu-flags ein display:inline-block;

gericoach

Zitat von SirEctor

gib dem Logo einfach ein margin-top:-20px; oder ähnlich
Edit: oder du gibst dem #menu-flags ein display:inline-block;

:) dachte immer, minus ist böse...aber hier klappt es, danke!

SirEctor

Warum soll minus böse sein? Wenn man es richtig einsetzt, ist es handzahm :-P

gericoach

Zitat von SirEctor

Warum soll minus böse sein? Wenn man es richtig einsetzt, ist es handzahm :-P

:) "in der Tat..." yo, passt auch auf dem Smartphone ganz gut. Bin mal aufs Feedback gespannt. DANKE Euch Beiden für die Hilfe!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

wie icons beschriften und untereinander? Theme Architecture

Jetzt mitmachen!