Tous les thèmes concrete5 testés par Fred

Ceci est une ancienne révision du document !

je ne recommande pas de prendre de thèmes payants! on court toujours le risque qu'il n'y ait pas de mises à jour lors d'un changement majeur de version du core de concretecms

thème pour concrete5.6

A clean, sleek, elegant and professional responsive Concrete5 theme. This free theme uses the latest bootstrap framework and is responsive up to mobile view.

http://www.concrete5.org/marketplace/themes/casual/

Un thème compatible pour les mobiles que j'ai utilisé pour le site de notre chalet des Ravières, maintenant passé sous +++ Bootswatch

On peut personnaliser certaines valeurs dans le thème casual

Se rendre sur https/votreSite/index.php/dashboard/pages/themes/customize/view/xxx

(changer votreSite et xxx)

Ici p. ex. on change la couleur de fond

résultat

Objectif: avoir des entrées dans l'éditeur WYSIWYG avec des classes personnalisées.

Commencer par ajouter une css quick'n'dirty.

Si on utilise déjà un package ne pas oublier de le versionner avec git, histoire d'avoir un historique des changements en cas de mise à jour du package!

Une fois que c'est fait, ajouter la classe dans votre fichier css, là p. ex. j'ai créé une classe pour centrer:

/*
hacks radeff
*/
.centrer{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   align-content: center;
}

Ensuite, dans le thème, éditer le fichier

  page_theme.php

si vous bossez avec stucco:

  /packages/theme_stucco/themes/stucco/page_theme.php

Et ajouter:

,
/*hacks radeff including previous comma!*/
array(
 'title' => t('Centrer'),
 'element' => 'div',
 'attributes' => array('class' => 'centrer')
)

à la fin, juste avant

        );
    }
}

Si vous ne voyez pas le changement, pensez à vider le cache.

https://VOTRESITEC5/index.php/dashboard/system/optimization/clearcache

Enfin, résultat:

Vous devez importer un site dans c5 et vous avez peu de temps?

Voici une solution sale mais rapide, qui permet d'éviter d'interférer avec les css de c5 (notamment celles qui servent pour l'administration du site) en surchargeant simplement.

Soit la css originale, p. ex. siteoriginal.css

Modifier avec une expression régulière la css en prenant garde auparavant à avoir une et une seule règle css par ligne:

saveback siteoriginal.css
cat siteoriginal.css | sed 's|^|#siteoriginalcss |g' > tmp && mv tmp siteoriginal.css

On aura un truc du genre:

/* original stylesheet old website */
#siteoriginalcss a:hover{background-color: transparent; color: transparent; padding: 0px}
/* #siteoriginalcss ... (suite de la css)*/

Si on est un des thèmes standards c56 (sinon adapter à ses besoins)

Copier la css dans /themes/yourtheme/elements/siteoriginal.css

Puis modifier

 /themes/elements/header.php

le nom du fichier dépendra du thème! ici c'est le thème par défaut; si on utilise le package/thème stucco, p. ex., ce sera

   packages/theme_stucco/themes/stucco/inc/header_top.php

On ajoute au début la css

<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('siteoriginal.css')?>" />
 
</head>

Puis un peu plus bas:

//...
<body>
//...
	<div id="header-area">
			<div class="divider"></div>
			<div id="header-area-inside">
			<?php			
			$ah = new Area('Header');
			$ah->display($c);			
			?>	
			</div>	
 
			<?php if ($ah->getTotalBlocksInArea() > 0) { ?>
				<div class="divider"></div>
			<?php } ?>
		</div>
	</div>			
	<div id="siteoriginal"> //modif zpartakov ADDED TO INTEGRATE ORIGINAL CSS

Puis modifier le footer en ajoutant un </div> pour fermer la balise

 /themes/elements/footer.php

//... début du fichier
</div>
<?php Loader::element('footer_required'); ?>
</div>
</body>

C'est tout!

Si on a pas envie de faire propre, une solution dégueulasse mais efficace

Dans une zone globale, ajouter un bloc html

Y mettre la css

Comme le bloc html est dans une zone globale, il est accessible à tous les blocs de toutes les pages

Il suffit donc de l'appeler sur un bloc donné

Les thèmes de base (ici, elemental) permettent très facilement de modifier les règles CSS; une partie des sélecteurs sont pré-selectionnés, pour les autres, on peut les identifier et les modifier.

souris clic droit sur une entrée du menu, “examiner l'élément”

vue smartphone (sur FF aka firefox))

CTRL-SHIFT-M - souris clic droit sur une entrée du menu, “examiner l'élément”

https://youtu.be/xI8dUNAc6fU?t=169

et

https://youtu.be/xI8dUNAc6fU?t=214

Autre solution, pour geek (ssh or ftp required), ajouter une css quick&dirty pour surcharger le thème

Enabling Basic Customization

ça c'est de la balle, où comment permettre à un admin de customiser son thème sans aucune connaissance technique

      <style name="Primary Action Color" variable="primary-action" type="color" />

aka Police personnalisée

Télécharger la police, p. ex. https://www.dafont.com/dry-brush.font, la copier sur le serveur du site, p. ex.

/fonts/DryBrush.ttf

Modifier le thème

~/web/c5/packages/theme_pixel/themes/pixel/elements ls -1
...
header_top.php
header_top.php.local.save

more header_top.php
   
<link rel="stylesheet" href="<?php echo $view->getThemePath()?>/css/lamourdeladanse.css" type="text/css" />

header_top.php.local.save est un backup, au cas ou une mise à jour du thème écraserait les modifs

la css:

~/web/c5/packages/theme_pixel/themes/pixel/css more lamourdeladanse.css

/* local css */
* {
/* font-size: 17px; */
}
@font-face {
    font-family: 'DryBrush';
    src: url('/fonts/DryBrush.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
.DryBrush {
     font-family: 'DryBrush';
}

on peut ensuite dans l'éditeur en code source appeler la police

https://www.dafont.com/1-punk.font

<style>
@font-face {
    font-family: '1Punk';
    src: url('/fonts/1Punk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
.1Punk {
     font-family: '1Punk';
}
</style>
<p class="1Punk">Hello, world!</p>

Hello, world!

On peut ajouter des propriétés à la css du thème, qui seront stockées dans la base de données

Pas bon pourquoi? Ben essayez vous verrez…

ajouter une css locale: chercher “overriding css concrete5” dans votre moteur de recherche favori

c'est plus technique mais nettement plus stable et sûr

Pas testé

The Hello Theme is crafted with simplicity and visual communication in mind.

The Hello Theme for ConcreteCMS is crafted with simplicity and visual communication in mind. It serves as an ideal solution for websites that want to convey a message primarily through imagery, such as a holding page for sites under construction or special announcement pages.

Hello is not intended to be a full site theme. This is only for limited pages and contains limited layout options. It features a background image attribute that allows you to have a full image background.

https://market.concretecms.com/products/hello/3c24a45b-cb9a-11ee-b9df-0a97d4ce16b9

Atomik

J'ai beau être un anti-nucléaire primaire, c'est mon thème de prédilection que j'utilise sur la majorité de mes sites persos ou réalisés en bénévole.

Quelques astuces: ConcreteCMS: personnaliser le thème Atomik (tuto radeff)

Customiser thèmes

Atomik customiser (v9)
[[..:atomikperso
Personnaliser le thème atomik]] (tuto radeff) * +++ Create and Install a Basic, Empty Theme * adapter le thème elemental: https://legacy-documentation.concrete5.org/tutorials/how-to-copy-the-elemental-theme-to-use-as-a-base-for-new-themes / copie locale * Themes: Enabling Full Content Swap * Adding CKEditor custom editor styles in a theme (Content block/rich text editor) * Create Your Package And Theme * Ajouter des polices de caratères (fonts) ===== Centrer un élément de bloc ===== Personnaliser le thème en ajoutant dans custom css :
```
.element-centered {    
  display: flex;
  justify-content: center;
}
```
====== Themes concrete5.6 ======

====== Thèmes testés ====== Une liste de thèmes gratuits testés par Fred Tous les thèmes concrete5 testés par Fred

====== Faire un thème de A à Z ====== http://www.concrete5.org/documentation/how-tos/designers/making-a-theme-from-start-to-finish/ ====== Changer des choses sans rien casser : Overrides ====== http://www.concrete5.org/documentation/how-tos/developers/change-things-without-hurting-anything-overrides/ ====== Personnaliser un thème proposé par défaut ====== http://www.concrete5.org/documentation/how-tos/editors/customize-a-core-theme/ Sans coder: ====== Ajouter une autre police de caractères à votre thème ====== http://www.concrete5.org/documentation/how-tos/designers/how-to-add-a-custom-font-face-to-your-theme/ ====== Autres thèmes & divers outils CSS, thèmes etc. ====== <note important> je ne recommande pas l'utilisation d'autres thèmes qu'atomik, pour des raisons de compatibilité avec les futures versions après, si vous voulez vivre dangereusement, libre à vous! </note>

ajouter des entrées CSS dans l'éditeur WYSIWYG

CSS: ajouter une css quick&dirty (importation de site)

CSS: overloader la css vraiment quick and vraiment dirty

CSS: personnaliser une CSS

custom font

taille de la police

Thème: Casual (responsive)

Thème: Hello

Thème: Replica

Pas testé

Replica Theme is an improved clone of Concrete5 Elemental Theme; Replica Theme is based on the default concrete5 theme Elemental

    Two presets: North Island, Night Road
    Block classes are replaced with block templates
    Responsive design
    Clean and commented less files
    Colors and fonts are editable once using less variables
    2 new blocks
    Works out of the box with extra Addons

https://market.concretecms.com/products/replica/6107d6c0-008f-11ef-951f-0a97d4ce16b9