phpBB.nl • Facebook en Twitter?

Pagina 1 van 1

Facebook en Twitter?

Geplaatst: 19 jan 2015, 17:03

door AHD

Hoe plaats ik een Facebook en Twitter plaatje bovenaan mijn phpBB 3.1.2 (prosilver) die linkt naar mijn Facebook en Twitter? Zie voor wat ik letterlijk bedoel rechtsbovenaan: '' http://www.phpbb.com/community ''. De plaatjes zelf heb ik al in 16x16.

Re: Facebook en Twitter?

Geplaatst: 19 jan 2015, 17:11

door El torro

Ik geloof niet dat daar een extensie voor is dus zul je zelf in de code van de overall_header de plaatjes en de bijhorende links moeten zetten.

Re: Facebook en Twitter?

Geplaatst: 19 jan 2015, 17:34

door AHD

Kan iemand me zo simpel mogelijk stap voor stap uitleggen hoe dit werkt?

Re: Facebook en Twitter?

Geplaatst: 19 jan 2015, 18:06

door El torro

Als jij even verteld of je weleens een bestand hebt aangepast en of je weet wat een ftp programma is,
dan zal ik uitleggen wat je stap voor stap moet doen

Grofweg is het zo:
http://wiki.phpbb.nl/3.x/Link_toevoegen_in_header

Re: Facebook en Twitter?

Geplaatst: 19 jan 2015, 18:16

door AHD

Dat klopt niet. Onderstaand de inhoud van mijn overall_header.html:

Code: Selecteer alles

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!-- IF U_CANONICAL -->
	<link rel="canonical" href="{U_CANONICAL}" />
<!-- ENDIF -->

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->

<link href="{T_THEME_PATH}/print.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="print" title="printonly" />
<!-- IF S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open+Sans:600&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
	<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->

<!-- EVENT overall_header_head_append -->

{$STYLESHEETS}

<!-- EVENT overall_header_stylesheets_after -->

</head>
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- EVENT overall_header_body_before -->

<div id="wrap">
	<a id="top" class="anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner">

			<div id="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
					<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->

			</div>
		</div>

		<!-- INCLUDE navbar_header.html -->
	</div>

	<!-- EVENT overall_header_page_body_before -->

	<a id="start_here" class="anchor"></a>
	<div id="page-body">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner">
				<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
			</div>
		</div>
		<!-- ENDIF -->

		<!-- EVENT overall_header_content_before -->

Re: Facebook en Twitter?

Geplaatst: 19 jan 2015, 18:24

door El torro

Sorry maar ik ben ontzettend lui en heb een hekel om veel te typen.

Daarom gaf ik een link en schreef erbij "grofweg zo"

Ik wil best verder helpen maar dan moet jij eerst antwoorden op mijn vragen en niet roepen dat het niet klopt.
(Terwijl daar staat dat het voor 3.0 is en jij hebt 3.1)

Dus om te voorkomen dat ik nog meer moet typen graag aangeven wat je wel of niet kan.

Re: Facebook en Twitter?

Geplaatst: 19 jan 2015, 18:28

door David

Als wij even in de broncode van phpbb.com gaan kijken, dan zien wij dat in HTML deze code wordt gebruikt voor de sociale media knoppen en de feed knop.

Code: Selecteer alles

<div id="top-social" class="top-social-home">
				<div id="top-social-icons">
					<a href="/feeds/rss/"><img src="/assets/images/icons/rss-20.png" alt="RSS" /></a>
					<a href="http://www.facebook.com/phpBB"><img src="/assets/images/icons/facebook-20.png" alt="Facebook" /></a>
					<a href="http://www.twitter.com/phpbb"><img src="/assets/images/icons/twitter-20.png" alt="Twitter" /></a>
				</div>
			</div>

Als je dan de elementen gaat inspecteren dan krijg je deze CSS:

Code: Selecteer alles

#top-social {
    position: absolute;
    bottom: 5px;
    right: 10px;
    margin: 0px auto;
    height: 20px;
}
.top-social-home {
    right: 29px !important;
}

#top-social-icons {
    float: right;
}

Dat zou je je dan in je bestanden moeten verwerken en kijken of het standaard zo werkt, op iedere website zal het anders werken omdat de stijl en header ook anders is

Re: Facebook en Twitter?

Geplaatst: 19 jan 2015, 19:38

door David

Inmiddels heb ik even het de HTML en CSS gespeeld, het was eventjes rommelen... tot ik mij herinnerde dat ik zelf ook eens zoiets had gedaan, heb de codes erbij gezocht en dat werkte beter

Ik plaats even een nieuw bericht, omdat ik denk dat het dan overzichtelijker overkomt, volg onderstaande stappen:

Open: styles/prosilver/template/overall_header.html

Zoek:

Code: Selecteer alles

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->

Plaats erboven:

Code: Selecteer alles

            <div class="social_media">
                <a href="http://www.facebook.com/phpBB"><img src="{T_THEME_PATH}/images/social/facebook-20.png" alt="Facebook" /></a>
                <a href="http://www.twitter.com/phpbb"><img src="{T_THEME_PATH}/images/social/twitter-20.png" alt="Twitter" /></a>
             </div>

Open: styles/prosilver/theme/common.css

Plaats helemaal onderaan:

Code: Selecteer alles

/* Social media buttons
----------------------------------------*/

.social_media {
    float: right;
    padding-top:30px;
}

Vergeet niet om je eigen Facebook en Twitter toe te voegen aan de code, nu staan die van phpbb.com er nog in. De icoontjes worden gezocht in: styles/prosilver/theme/images/social je moet daarvoor zelf een map social aanmaken in: styles/prosilver/theme/images en daar deze icoontjes inzetten:

en

. Klik met je rechter muisknop op de icoontjes en dan Afbeelding opslaan... dan staan ze op je computer en kan je ze uploaden naar je server.

Vergeet niet je cache te legen na deze wijzigingen, dat kan via je beheerderspaneel.

Succes

Re: Facebook en Twitter?

Geplaatst: 20 jan 2015, 23:04

door AHD

Het is gelukt. Maar kan ik het ook direct absonder achter mijn: '' site beschrijving '', zetten?

Re: Facebook en Twitter?

Geplaatst: 21 jan 2015, 15:21

door David

Dat kan uiteraard, er moeten dan wel een paar dingen veranderen. Heb het even op test forum uitgeprobeerd en ik vond dit het mooiste

Open: styles/prosilver/theme/common.css

Zoek:

Code: Selecteer alles

/* Social media buttons
----------------------------------------*/

.social_media {
    float: right;
    padding-top:30px;
}

Vervangen met:

Code: Selecteer alles

/* Social media buttons
----------------------------------------*/

.social_media {
    padding-left: 170px;
    padding-top: -215px;
}

Open: styles/prosilver/template/overall_header.html

Zoek:

Code: Selecteer alles

<p>{SITE_DESCRIPTION}</p>

De HTML code zelf veranderd niet, alleen de locatie van je code veranderd. Je moet je HTML code nu plaatsen onder de code die je moet zoeken, zoals hierboven aangegeven.

Je kan de locatie nog enigszins veranderen, dan moet je een beetje spelen met de waardes in je CSS. Na de wijzigingen even je cache legen via het beheerderspaneel en wellicht ook even CTRL-F5 voordat je verandering ziet.

Wijziging: Toevoeging:

Kom er trouwens net achter dat de padding-top: -215px; geen effect heeft, je kan er bijvoorbeeld wel padding-top: 15px; van maken. Maar dan komt die verder van je forumbeschrijving af en hij moet er juist naar toe

Re: Facebook en Twitter?

Geplaatst: 22 jan 2015, 14:39

door AHD

David, ik heb wat gespeeld met je code's en ik vind onderstaande manier het mooist, kan het op onderstaande manier:

Code: Selecteer alles

/* Social media buttons
----------------------------------------*/

.social_media {
    float: left;
    padding-top:35px;
}

Re: Facebook en Twitter?

Geplaatst: 22 jan 2015, 15:07

door David

Ja hoor, als jij dat het mooist vind dat kan dan

Re: Facebook en Twitter?

Geplaatst: 27 feb 2015, 11:27

door AHD

Hoe kan ik het m.b.v. de volgende manier direct/strak naast mijn: '' site beschrijving '', zetten:

Code: Selecteer alles

/* Social media buttons
----------------------------------------*/

.social_media {
    float: left;
    padding-top:35px;
}

Re: Facebook en Twitter?

Geplaatst: 12 mar 2015, 10:53

door yomi

Hallo, " David"

Ik heb ook een vraag, Ik heb gedaan zoals het hierboven beschreven staat.
De buttons zijn zichtbaar alleen ze staan in de top en niet in de bottom.
Ik krijg het met geen mogelijkheid voor elkaar om de buttons naar beneden
te zetten, zie op de foto de pijlen waar ik graag de buttons zou willen hebben staan.
http://www.tuinvijverforum.nl/images/te ... hot001.png
Met welke code in mijn common.css zou dit kunnen lukken.
Adres forum: http://www.tuinvijverforum.nl

Code: Selecteer alles

/* Social media buttons
----------------------------------------*/

.social_media {
        float: right;
        padding-bottom:25px;
    }

Re: Facebook en Twitter?

Geplaatst: 12 mar 2015, 11:15

door El torro

padding-top: 165px; ipv padding bottom geeft op het eerste gezicht een goed resultaat bij jouw forum

Re: Facebook en Twitter?

Geplaatst: 12 mar 2015, 11:46

door yomi

Super El Torro bedankt voor je snelle informatie.

padding-top: 165px; ipv padding bottom geeft op het eerste gezicht een goed resultaat bij jouw forum

Als ik de code aanpas dan staan de buttons keurig waar ze moeten zijn.
Alleen dan loop ik tegen het volgende probleem aan dat mijn forum ook vast staat qua grote.
Met andere woorden als ik op een 19 inch scherm kijk dan kan ik alles zien, maar als ik daarna op een 17 inch scherm, of iPad kijk dan moet ik in de breedte scrollen voordat ik alles kan zien.
Hoe kan ik dit verhelpen , want als ik padding-top: 165px weer terug zet naar padding-bottom:25px; dan pas het forum zich weer keurig aan de 17 inch screen aan, en hoef ik niet te scrollen maar dan staan de buttons weer niet waar ze moeten staan. De style die ik gebruik is gewoon prosilver.

Nog een vraag. Ik zou graag nog een aanpassing willen doen en dat is dit.
Ik zou graag de letters van de naam en site description van het forum wat groter hebben.
Zie voorbeeld http://www.sportvistotaal.nl
Ik heb al wat zitten vogelen maar kom er niet echt helemaal uit hoe dit voor elkaar te krijgen.

Dit staat nu in mijn common.css file.

Code: Selecteer alles

/* Site description and logo */
#site-description {
	float: left;
	padding-top: 165px;
}

#site-description h1 {
	margin-right: 0;
}

Zou iemand mij daar nog mee kunnen helpen.

Alvast bedankt.

Re: Facebook en Twitter?

Geplaatst: 12 mar 2015, 19:02

door El torro

Sportvisser heeft de gehele header aangepast
Zie:
http://www.sportvistotaal.nl/style.php? ... 5c5979fc6f
Regel 4052

Jij kan dat ook doen of gewoon een "font size" aan je h1 toevoegen

Re: Facebook en Twitter?

Geplaatst: 13 mar 2015, 07:39

door yomi

Ik heb deze code gebruikt en dat werk super.

Code: Selecteer alles

#header h1 {
   padding: 0px 10px 0px 10px;
   margin: 0;
   font-family: "Harabara", Arial, Helvetica, sans-serif;
   font-size: 25px;
   display: block;
   text-shadow: 0 3px 3px #01102f;
   min-width: 377px;
   height: 0px;
}

Blijf ik alleen nog zitten met het eerste probleem zie hier.
Weet iemand hoe ik dit nog zou kunnen oplossen.

Als ik de code aanpas dan staan de buttons keurig waar ze moeten zijn.
Alleen dan loop ik tegen het volgende probleem aan dat mijn forum ook vast staat qua grote.
Met andere woorden als ik op een 19 inch scherm kijk dan kan ik alles zien, maar als ik daarna op een 17 inch scherm, of iPad kijk dan moet ik in de breedte scrollen voordat ik alles kan zien.
Hoe kan ik dit verhelpen , want als ik padding-top: 165px weer terug zet naar padding-bottom:25px; dan pas het forum zich weer keurig aan de 17 inch screen aan, en hoef ik niet te scrollen maar dan staan de buttons weer niet waar ze moeten staan. De style die ik gebruik is gewoon prosilver.

Re: Facebook en Twitter?

Geplaatst: 13 mar 2015, 19:34

door Theriddler

http://htmlcss.jaapvdveen.nl/wat-responsive-webdesign/

http://webdesignerwall.com/tutorials/css3-media-queries

Voorbeeld:

Code: Selecteer alles

@media screen and (max-width: 600px) {
      #site-description {
      padding-bottom: 25px;
      padding-top: 0;
      }
}