Χρήσιμα custom CSS

[Giannis 49]

Μερικά χρήσιμα κατά την προσωπική μου άποψη 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%; }
}
{{endif}}

---

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

pre.ipsCode{
  max-height: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

[Dimitris 52]

Πάρα πολύ καλές αλλαγές ευχαριστούμε

Θα τις δοκιμάσουμε σύντομα !