I'm new to mediawiki and want to make my own skin for a mediawiki. For example I have a button (div.button-field > input) and I want to give it height: 100%. I know you can put it in a custom.css like
div.button-field > input {height: 100%;}
But if I do it for every element I want to customize the .css gets very long. The other thing, if I want only to customize a specific button which is nested like "div > div.container > form > div > div.button-field > input" and I add a div or remove a div, then it wont work anymore and I have to adjust the "path". So what would be the right way todo it? Or is the .css the best way todo it?
With kind regards
Oli
The answers depend on how much you want to change.
The first easiest path is to find an existing skin, see on MediaWiki.org.
You can configure some elements like the logo, the favicon or the sidebar, and you can change every text message of the interface.
Then, you can customise, as a logged-in administrator, the CSS rules by modifying the page MediaWiki:Common.css (example on English Wikipedia), or possibly MediaWiki:YourSkinName.css for skin-specific rules (for example MediaWiki:Vector.css to modify only the skin Vector; example on English Wikipedia).
You can also modify add JavaScript features by modifying MediaWiki:Common.js (example on English Wikipedia), or MediaWiki:YourSkinName.js for skin-specific rules (for example MediaWiki:Vector.js to modify only the skin Vector; the page does not exist on the English Wikipedia).
This kind of modification is recommended because it will be kept during MediaWiki updates, although minor adaptations could be needed on the long term.
If you want heavier changes, you can copy an existing skin, rename it, and change the PHP code, for instance by moving or deleting entire blocks. Prefer copying a well-supported skin like Vector or Monobook to be sure it is compatible with most MediaWiki extensions.
But it will take some or lot of work during MediaWiki updates (depends on the quantity of changes), and if you cannot do this work the risk is either you custom skin breaks or you will stay with an old MediaWiki version (which is not recommended for security reasons).
Also, if you choose this path, be warn not to break the structure expected by the VisualEditor if you want it continues to work.
There is a tutorial on MediaWiki.org to adapt the skinning from easiest ways to heaviest, see Manual:Skinning Part 1 and next pages.
Related
I'd like to add to my course materials, some additional modules which will be marked as optional.
By optional, I mean that they have content (mostly static, e.g., readings) and are probably not going to be covered directly during the course lectures.
However, I'd like them still to appear below the main modules, but somehow separated and marked differently as, well, optional.
I guess I could index them last and also add "(Optiona)" text, but just wondering if there is a better solution for presenting them, e.g. a separating line, a tag like the "coming soon" option, etc.
Thanks
The simple approach is to list these modules last (by using a high value for morea_sort_order) and then add an Optional label (by using morea_labels). Here's an example:
If you want to get fancier, then you could edit the master/src/modules/index.md file to customize the way the modules page is rendered. If you go this way, you could put a dividing line between the required and optional modules, add some CSS to change the border color or background of the optional modules, or anything else you want to do.
I am new to Plone and I'm just learning how to change stylesheets.
I successfully changed the ploneCustom.css in /Plone/portal_skins/custom/ and saved it.
But when I tried to take a look at the site, I realised that the ploneCustom.css stylesheet isn't even loaded.
According to my research a template is broken...
But what do I do with that information?
Where do I fix it and how?
Thanks for your help in advance!
50 ways of styling Plone, four of them explained:
1.) Customize ploneCustom.css
A relict of the skin-folder-times, by now it is recommended to use browser-based resources, instead.
The reason is, when you have a lot of resources registered, it's hard to keep a correct order of the skin-layers and that can lead to unwanted overrides. Nevertheless, if you don't have a complex setup, or for quick testing, it is feasible to use skin-layers and ploneCustom.css, the exact steps are:
Go to "http://yourhost.net:8080/yourPloneSiteId/portal_skins/sunburst_styles/ploneCustom.css/manage_main".
Click on "customize".
Enter some style for testing, e.g. "body { background: red }", save.
Make sure, CSS-debug-mode is on at "http://yourhost.net:8080/yourPloneSiteId/portal_css/manage_cssForm" also make sure that ploneCustom.css is actually on the list and enabled, meaning the checkbox on the left is checked. It should be the last entry in order to override all other stylesheets.
2.) Use a site's page as style-source
Alternatively you can have a look at "adi.ttw_styles" (disclaimer: I'm the author), which provides you with a stylesheet living in the site as an ordinary item of type "Page" and is registered as a browser-based resource, so naming-conflicts are impossible. Still, the stylesheet lives in the site then, which wouldn't be suitable for cases, where you want to have a reproducable theme.
3.) Include browser-based resources in your addon (f.k.a. "Product")
Well documented.
An addon-generator, which allows you to create an addon holding a browser-based stylesheet and javascript, is "adi.devgen" (disclaiming again: I'm the author), after installation simply execute devgen addBrowserSkel your.addonname of the commandline.
4.) Diazo
The widely promoted state-of-the-art-way-of-theming. Well documented, have fun learning XLST :-)
I have several large CSS files and making a change can sometimes take a few minutes just to find the right selector to change. I would like it if there was a nice ModX editor for CSS, but I haven't been able to find one. I am willing to settle for splitting up my files into parts, as long as my site still renders. Can I do that and how? If there is a nice editor (plugin?) instead, where can I find one?
I guess the real question is what kind of parts are acceptable for you. If you follow this question, you can begin the process of allowing ModX to manage your CSS. Once this happens, your options open considerably. Your CSS editing will then become easier and less time consuming depending on your level of expertise with ModX. This answer will be pretty simple, as it will show simply how to add a given selector as a resource. Other further development can be intuited from here, though.
CSS as a Resource
Once your CSS is being managed as a Resource (which takes about 15 minutes), you may utilize Templates, Template Variables, Chunks, Snippets and Plugins. Thisis actually pretty amazing, but setup can be a bit of a pain. You will basically be investing some time to save a lot of time in the future. The next logical step is split your Selectors accordingly, but you don't want to break what currently works. Having a fluid understanding of the getResources addon will be crucial to further development.
How to do it:
1. Create a new chunk
Click the Elements tab, and click "New Chunk". Name it "css-selector". Set the content to:
[[+pagetitle]] {[[+content]]}
It's as simple as that. Don't forget to click "Save"! This will let you set a Selector as a resource. It will use the title for the selector and content for the rules. You can forget about using those braces any more. Your new chunk will handle those from now on.
2. Adjusting your Template
Now, we just have to convince the template that it nows how to read parts, as well as not forget the whole. Open your CSS Stylesheet template (the one that says [[*content]] for its content). Adjust the code so that it has the following:
[[!getResources?
&parent=`[[*id]]`
&depth=`1`
&tpl=`css-selector`
&includeContent=`1`
&sortby=`menuindex`
&sortdir=`ASC`
&limit=`99`
]]
[[*content]]
Again, click "Save". Let me explain the Template real quick. If you have child, they'll get rendered first depending on their menu index. Further, it will render the contents of the document that are not children afterward. This will allow you to only make new resources for your most important selectors, while keeping the stuff that will never change in the main resource.
3. Create a new Template
This is so that your selectors don't do anything funny and just render the content. Create a new Template named "CSS Selector". Set its content to:
[[*content]]
4. Create a new Resource
Create a new Resource. Set the title to the selector for the css statement you want to manage. Then set the content to the rules without the braces. For instance, if your css statement is: div#header .logo {border:0;}, you'll set the title to div#header .logo and the content to border:0;. Set the resource alias to whatever you want. I use numbers for each one. Set the template to your new "CSS Selector". Important Now, set the Parent Document to your Stylesheet. Click Save.
5. Testing the Stylesheet
First, Right-click your new resource and choose "View Resource". This will just make sure that the statement was rendered correctly. It should simply say your rule in CSS format.
Next, Right-Click the Stylesheet resource and choose "View Resource". You should see the Selector at the top and all of the other rules below it.
Final Considerations
Observations
You'll notice that your child resources do not have to be changed to "CSS" for Document Type. Only the parent stylesheet has to be. This allows for some neat stuff as your expertise with ModX grows.
You can change the order of rules by simply changing the menu index of them.
The number of rules that can be done this way is based on the &limit variable in the getResources statement in your template. &limit applies to each stylesheet, so in this example you have 99 statements per stylesheet that may be separate resources.
A Note on Server Load
This will place load on the server as the number of resources goes up. For development, keep the "do not cache flag" (!) on your getResources statement. Once you are done, remove the exclamation mark and let it all be cached. This will save a ton of load.
Further Development
I added an isEnabled template variable to mine so I can turn on and off each rule as I pleased.
You may possibly begin to manage your CSS on the front-end utilizing FormIt.
Custom Manager Pages may even be a better option for you.
Further abstraction might allow you to create Groupings of statements for even further organization.
My theme has a custom css code block where I allow the site owner to add any custom css they need directly to the head section of the theme. This inserts whatever they've placed in this block into the wordpress database as a custom option insert.
I then retrieve this content into header.php and output it between an inline style tag like so...
<style type="text/css">
.test h1 {}
.testcss2, .somecss {}
</style>
This works perfectly fine, however, I would like to clean up and minify the markup when its written to the database. I suppose a regex is needed to do this? If so, what would that be?
The result I'm looking for, when the code is written into the page's markup is...
<style type="text/css">.test h1{}.testcss2,.somecss{}</style>
I'd also like to reverse the minified markup when its presented back to the user to edit in my theme options. In that view, I just want to reformat the minified css code so that each directive is back on its own line.
It depends what you want achieve by doing this. I agree with #thomasfedb that you will likely messup the style of most peoples CSS by doing this transformation and will likely cause more trouble than its worth.
It's my suggestion that you keep the data exactly as the user entered it, and then 'minify' it when you render it to the page.
This will not save you and storage in your database, and it will increase your CPU usage per page render, but it will save you the bandwidth of all the extra new-line characters.
Another option, presuming database storage is not much of a concern, is to store the data twice, once where the user edits, and once minified. Then simply minify and copy the user-editable field into the minified field whenever the user makes any changes.
I don't see any real reason to do this, a few newline charactors in a webpage isn't realy going to cost you very much page-weight.
Therefore my solution would be: don't.
Also, even if you reverse the minification, you might 'mess with the style' of some people, who like different css layouts.
Is there a module in Drupal that allows me to put link at the end of a page?
http://lh6.ggpht.com/_SDci0Pf3tzU/Sfm7vF_MSiI/AAAAAAAAEtY/VX3BXaMOfSM/s400/linksatend.jpg
I tried to use menu and put it as a block at the footer, but the menu items are arranged vertically, instead of horizontally.
Is there anyway to do it without ( preferably) touching the CSS and HTML?
changing the menu items from vertically to horizontally is a matter of 1 or 2 css rules. which is why i doubt that there is a module for this. if you would post a link to your site, or the html + css, i could help with the css.
Links at the end of the page can be controlled by a few different things.
First, check the Blocks administration and see if there is a content area for the footer. Maybe there is a block there that is controlling these links.
Next, depending on well the theme is built, check the configuration options under Admin > Site Building > Themes > Conigure > (Your theme). Many have options to change what links display in the footer.
Lastly, check the page.tpl.php. They could also be hard-coded in the template (which is bad) and edited from there.
In terms of answering your question about 'a module to alter links', you can see that since the links can be controlled from different places, a module just for this purpose would be pointless. The correct way is to set the appropriate options in template.php so it can be configured in your theme settings.
You might have some luck using the Nice Menus module - it's intended to create animated menus but if you give it a flat menu tree, it might be close enough to what you want. If that doesn't work, there's about 100 modules dealing with navigation.
Still, the best way would be to place the menu's block in the footer and modify the theme to flatten it with CSS.
Assuming you don't won't to touch the theme, maybe because you're using an unmodified contrib theme, you can use either of two approaches:
create the block by hand as a custom HTML block, which gives you full control over the contents. The main downside is that you'll have to maintain it by hand instead of using admin/build/menus
create a PHP block, either custom (boo !) or in your site-specific module (better), to generate a block with markup appropriate for the theme you're using, based on the actual primary links, which you obtain from menu_primary_links(). Downside it that you have to create a site module if you don't already have one, or that you'll have to enable the PHP filter if you create it as a custom block.
This being said, I think you'd still be better off modifying the theme if it's a custom one, or creating a sub-theme for the theme you're using if it's a contributed one. It will be less work and, this being a matter of appearance, falls rather in theme scope than in module scope.