I am very new to both CSS and pelican !
basically, I would like to have a static website using pelican that looks like the website X which is made based on Bootstrap 2. I have installed and now using pelican-bootstrap 3 them (again, I am using bootstrap 3). I have inspected the website X and I can see the "style.css".
I believe I need to utilize this file somehow in my pelican blog. therefore, I have created a folder called, "css" inside the content folder, and put the style.css over there.
In the pelicanconfig.py, I have made these changes,
THEME = '/home/mysite/pelican-bootstrap3'
BOOTSTRAP_THEME = 'simplex'
PYGMENTS_STYLE = 'simplex'
CUSTOM_CSS = 'css/style.css' ##
STATIC_PATHS = ['images', 'css/style.css'] ##if I am not mistaken I am specifying the address inside my content folder.
however, I don't see changes, and when I inspect my blog element, the style.css is something different (probably its written based on simplex)
my questions are here
1) are the config parameters correctly set ?
2) does it sound reasonable to copy and paste the other css file from bootstrap2 into this theme ? (I understand I would need to tweak it a little bit).
3) I appreciate any comment
Disclaimer: I'm the author of the pelican-bootstrap3 theme for Pelican.
If I understand correctly, you want your Pelican-based site to look like a Bootstrap 2 site. If that is indeed the case, it makes no sense to use pelican-bootstrap3, because as the name implies, it is based on Bootstrap 3, which looks different than Bootstrap 2. Moreover, in order for the CUSTOM_CSS variable to work at all in the theme, you must also tell Pelican where to copy the css file, like so:
EXTRA_PATH_METADATA = {
'extra/custom.css': {'path': 'css/custom.css'}
}
And even if you do that, you will still not get the looks of "website X", as you call it, because the HTML in Bootstrap 3 (on which the theme is based) is differently structured than the HTML in Bootstrap 2.
My advice: use one of the few Bootstra 2 based themes available in the pelican-themes repository.
Related
I've a weird issue in my Drupal 9 website where a couple of regions (subfeatures and footer) get rendered differently in different pages with no consistent behavior.
They are loaded via the theme's default page.html.twig and should render inside the page js-layout wrapper as in below screenshot
But in some pages, it gets rendered outside the wrapper like in the below screenshot
This is simple website with no overrides on the theme level for the regions so this is quite strange
Without knowing the theme, it is difficult to give an answer. (Which theme is used, which templates (which Twig file provides the theme) and so on...
But let me try to give you a starting point:
Check all twig files of your theme
If there is a multiple for page, like: page.html.twig & page--article.html.twig. Then check the HTML structure for it
Check the region's conditions
In the page-twig templates, check if the HTML closing tags depend on the region conditions. Is there a condition that the div sometimes closes earlier?
I hope this will help you.
I've started working with the omega 4 theme in drupal, switching from omega 3. I've created a subtheme succesfully, and according to the documentation I want to make my own layout. I've copied over the "Simple" layout from omega to my subtheme folder, as well as the required css and sass files. I've renamed all instances of Simple to Grid (my layout name).
That all seems fine, but when I go into my drupal installation, appearance -> settings -> layouts I still only see the four main omega layouts (simple, divine, hero, off canvas). It claims to show any layout from omega or installed subthemes. Why won't my layout show up for selection?
Additionally: Is it possible to use a different layout for the front page than the rest of the site?
I had the same problem myself and it turned out that in MY.layout.inc I forgot to changhe the value
template = simple-layout
with
template = MY-layout
pamatt: BONUS! I was having the same problem. This fixes it.
A little more detail:
If you follow the directions here it's possible you might miss this explicit reference. I'm updating that page now.
Go to your
themename/layouts/layoutname/layoutname.layout.inc
file (of course, substitute "themename" and "layoutname" with the appropriate names) and look for a line that starts with "template" i.e.,
template = simple-layout
change "simple-layout" to your whatever you named your tpl file, minus the ".tpl.php" part.
I'm coming back to this question since after a long absense of coding I came back to it this weekend and had the exact same problem! Above answers are correct.
Another issue I had was that I had to clear the cache from Drupal -> Configuration -> Performance and not just my browser cache. After clearing the cache it showed up.
Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla
My question is simple, do I need to rename vector.js file when I create a skin based on Vector? Let me explain more on how I created my custom skin...
I have created a custom skin for my Mediawiki and its based on Vector. My skin works almost exactly like Vector but with css tweaks and with changes to the html template elements inside the skin template which is basically moving around the elements and displaying a bit different that the way it is done in Vector. I read the following tutorials when creating my template:
https://www.mediawiki.org/wiki/Manual:Skinning/Tutorial
http://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/
These are the things I did when creating the custom skin:
I copied and pasted the Vector folder and then renamed it to 'myskin'.
I then created the 3 files, skins/myskin/myskin.php, skins/myskin/MySkin.skin.php and skins/myskin/MySkin.i18n.php like its mentioned in the tutorial link above.
I then renamed the key, identifier and name of my skin from vector to MySkin or myskin like its mentioned here:
"When building a skin you'll be working with your skin name in three
forms, a lower-cased key, a camel cased identifier, and a localized
skin name. For our skin the key would typically be 'myskin', the
identifier 'MySkin', and the localized name 'My Skin'.
I edited the screen.css and tweaked it to the style I want.
I then edited the skin template. Here instead of using "class SkinMySkin extends SkinVector", I copied the "class MySkinTemplate extends BaseTemplate" section from Vector and re-arranged the templates and tweaked it to create my skin.
After doing all of the above, everything works. However, I noticed that when I copied all the files from Vector to MySkin, there is this "vector.js" file in it too. I dont know if I need to rename this js file to myskin.js or do I leave it like this. Currently I did not rename this javascript file and everything seems to be working fine anyways. So I am not sure what this file does. I read the tutorials and also searched MediaWiki and it doesnt mention anywhere if I need to rename this file to myskin if I am creating a skin based on Vector. I also dont see a link or reference to this file inside my skins/myskin/myskin.php, skins/myskin/MySkin.skin.php and skins/myskin/MySkin.i18n.php files. Can someone please clarify this for me?
I have also created a custom skin with the manual like the OP. I didn't rename vector.js and everything seem to work fine for me.
You could simply rename or move vector.js and check if you notice any missing functions or weird behaviour in either the following functions
Collapsible tabs
Focus search input at the very end
animate drop down menu in and out
or
Always collapse if the "More" button is already shown
Since this is more or less all the .js seems to do + providing some fallbacks.
I'm pretty sure I've read somewhere that you can actually move the main plugin *.php file to somewhere else (I assume under your theme directory) to have it safe in case you made changes to it and your plugin updates. I tried Google but I can't find anything. Google page with good results will suffice.
I've just experienced a situation where my 2 plugins which had its layout changed and accommodated my needs and I want to make sure it doesn't happen again. Apart from having the main file in another location, is there a way to move along any CSS and JS files as well?
In Concrete5 CMS there is a nice way of doing this, by creating a new folder inside a block of an addon (may be regarded as a WP plugin), inside of which you can create copies of main file, any CSS and JS files and then you can simply edit them and choose that template for a page location you are using that block in.
I assume there is no such thing in Wordpress but how close can I get?
UPDATE: I found where I applied that advice on creating a new instance of the file then moving it to the theme directory.
The plugin in question was HL-Twitter. These are the plugin files:
admin.php
archive.php
functions.php
hl_twitter.php
hl_twitter_archive.php
hl_twitter_widget.php
import.php
widget.php
Now, this is the top contents (commented out) of the hl_twitter_widget.php:
Widget Theme for HL Twitter
To change this theme, copy hl_twitter_widget.php
to your current theme folder, do not edit this
file directly.
Available Properties:
$before_widget
$after_widget
$before_title
$after_title
$widget_title
$show_avatars
$show_powered_by
$num_tweets: how many tweets to show
$tweets: array of $tweet
$tweet: object representing a tweet
$tweet->twitter_tweet_id
$tweet->tweet
$tweet->lat
$tweet->lon
$tweet->created
$tweet->reply_tweet_id
$tweet->reply_screen_name
$tweet->source
$tweet->screen_name
$tweet->name
$tweet->avatar
$user: represents the Twitter user (ONLY SET IF SHOWING A SINGLE USERS TWEETS!)
$user->twitter_user_id
$user->screen_name
$user->name
$user->num_friends
$user->num_followers
$user->num_tweets
$user->registered
$user->url
$user->description
$user->location
$user->avatar
So I was wrong about copying the main file (in this case hl_twitter.php), but still - this enabled me to edit the file outside the plugin directory and the system somehow checks for its existence and picks it up if exists.
If this behavior something that is natively supported by Wordpress or it has been integrated in the plugin itself?
With themes, Wordpress has a concept of "child themes" which allows exactly that: to keep changes separate from main theme, in case it changes.
I haven't yet found a way to do this with plugins.
I'm using a few tactics myself:
I bump plugin version to a very high number like 99.9. This way Wordpress won't ever update the plugin.
Store my plugins in version control (i use git, but it doesnt matter), this allows you to update the plugin, run the 'diff' tool and see what changes happend. If you don't like you just revert like it would be a bad code you've written. But this approach requires a bit of skill.
Are you talking about running parts of a modified 3rd party plugin, and an updated version, at the same time?
That's not going to be possible. There is no magical method of "preserve my changes and transfer them into the new version automatically". The way to go here is doing a diff between the edited version and the update, and integrating the changes in the actual source files.
The bottom line is, if you manually edit a third party plugin, you're in for manual review (and possibly rework) once an update takes place. That's why it's usually not a good idea to extensively modify third party plugins.
Well in fact, yes! There is some kind of way.
You have to remove the to be modificated plugin's original actions/filters and then add your altereted actions/filters.
If the desired plugin is even coded in OOP you can just inherit the whole class and rewrite the wanted functions (oh sorry: "methods". we're talking about OOP ;) ). Instantiate your inherited class and rest as above.
Maybe there are better ways! I already search for a method so that the original class won't even get loaded but our altered one instead but I'm no John Carmack.