Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble

Χρήσιμα custom CSS

Recommended Posts

Μερικά χρήσιμα κατά την προσωπική μου άποψη CSS που μπορούν να εφαρμοστούν στο custom.css αρχείο των CSS templates του theme που χρησιμοποιείτε.

Αλλαγή του font με Google Font σε όλο το site:

body.ipsApp_front { font-family: 'to_onoma_tou_font', sans-serif }

σε συνδυασμό με την προσθήκη του παρακάτω στο globalTemplate ακριβώς πριν το κλείσιμο του head:

<link href='https://fonts.googleapis.com/css?family=to_onoma+tou_font' rel='stylesheet' type='text/css'>

Αλλαγή μεγέθους του font σε όλο το site:

html { font-size: 70.5%; }

{{if theme.responsive}}
/* Mobile font size */
@media screen and (max-width: 767px) {
	html { font-size: 70.5%; }

Ορισμός μεγέθους σε ύψος του code tag όταν αυτό ξεπερνάει το όριο των 500px ή όσο θέλετε εσείς να ορίστε:


Τοποθέτηση όλων των embed videos στο κέντρο:

div.ipsEmbeddedVideo {
    margin:0px auto;

Ορισμός μεγέθους όλων των εικόνων από εξωτερικούς συνδέσμους σε συγκεκριμένο μέγεθος ανά τις εκατό:

.ipsType_richText img  {
  max-width: 50%;
  max-height: 50%;

Αλλαγή του εικονιδίου "Like" σε συγκεκριμένο από Font Awesome:

.ipsButton_like .fa-heart:before{ content: "\f087" }

Προσθήκη εικονιδίου από Font Awesome σε κατηγορία (αλλάξτε το ID της κατηγορίας στο data-forumid και το Unicode ID του εικονιδίου στο content) :

[data-forumid="2"] .fa-comments:before {
	content: "\f0a1";

Αλλαγή εικονιδίου εφαρμογής στο Navigation Bar, μόνο για τα θέματα από IPSFocus. Παράδειγμα για την εφαρμογή του ημερολογίου:

.ipsNavBar_primary > ul > li[data-navTitle='Calendar'] > a:before{ content: "\f073" }

Μοιραστείτε μαζί μας τις δικιές σας παραλλαγές του custom.css

  • Like 3

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.