Hello I'm here for counseling as I'm currently re-designing my website to add a user-interface which will allow me to edit it's architecture and content anywhere and whenever I want.
(I know there is already CMS or Frameworks made to ease the development but I'm trying to learn the "how to" and methods of development before jumping that step.)
I designed my website stylesheet using SASS/Compass which output me a clean CSS file. In this css I have some icons classes generated using SASS loop, they have the same attributes but the background.
$icon-list: aftereffect, photoshop, illustrator;
#each $icon in $icon-list {
.#{$icon} {
background-image: url("../icons/JPEG/#{$icon}.jpg");
}
}
The "$icon-list"s content which was static is now stored in a table to be dynamic, I wish to add and remove entries freely without manually editing and producing again and again.
So my question here is : How can I do to generate the icon classes only when there is an update in the icon's table ? What's the best way to do it ?
Those are the two mains solution I came with:
I think it's possible to compile SCSS with PHP, I could edit the icon's SCSS file, then replace the $icon-list variable's content and compile scss whenever I'd issue an add/remove request with php on the icon table. But I'm not too sure of how to do it.
Always when an add/remove request would be issued, I could generate the new icons classes with php and stack them to the bottom of the main stylesheet. But then I'd have to search and remove the previous classes, because It wouldn't erase the previous styles and I wish to keep only one css file.
I hope you will be able to help and counsel me on which methods are the best and if you have a better way to do it. I'm not asking for snippets of code because I really wish to develop myself and learn but If there is a need for it, to explain something then be it. I'm really sorry for seeming exigent and for my bad english as I'm not a native speaker.
Thank you.
Related
I would really appreciate if anybody could help me with this question :)
I want to know whether it's possible to create your own semantic markup in PHP, just like BB Codes, but I want to be able to use it within my template engine system, so I could use it to call custom modules like voting system, adding comments, login form, registration form and so on...
Let me make it clearer for you guys of how I mean;
I'm working on my own CMS not to use it for production purposes but to learn PHP in a better way;
So I had this idea to call specific modules in a page based on their position and in order to be able to do;
For instance we're having a login module which is simply a login form, nothing too crazy, however you want to be able to include that module dynamically in any page you want using the backend and not touching any code;
So all you do in the template page is using my bb codes that I told you earlier;
Something like this;
Remember this is only an idea;
<zone name="left_sidebar"></zone>
And you add this zone markup on your sidebar and if any of your module supposed to be displayed on your left sidebar, it will just by having this markup and nothing more...
And you gone have loads of these semantic markups based on how many editable blocks you have on your page; so you could have one for the right sidebar, one for footer and one for header... etc.
So I now need to know how to could lookup for opening and closing tags, in this case it would be <zone></zone> , then it need to lookup for its attribute and its value, in this case name="right_sidevar"
....
Anybody have any idea of how I could possibly do this kind of thing...
Thanks in advance :)
You could check out TWIG; while it doesn't directly support this kind of feature (because it uses a special syntax for its own elements) it does have very good support for making your own elements, tags, sub-applications and other funky things in the backend.
http://twig.sensiolabs.org/
There are also a number of systems that perform this kind of task in the front-end; this would mean that the substitution is done by Javascript in the browser. In addition to the already mentioned Polymer, there's also Google's framework, Angular.
https://angularjs.org/
Maybe you can use php's libxml module to parse your xml file.
This question is addressed only to people having some experience in programming MediaWiki plugins.
I want to put some header at top of page with use plugin and html. I need to put some html code as the first tag after <body> opens to not but not know which hook or method should I use to achieve goal - Mediawiki has too much hooks to choose please suggest one.
http://www.mediawiki.org/wiki/Manual:Hooks
Result after plugin run should look like this:
<< Custom header>>
-----
<< Unchanged Mediawiki page >>
Could you help with this trivial problem?
One possible solution is to inject some JavaScript to create HTML but it is artificial and it will not work with Google Search Bot.
I think that many people want to put something on the top of their MediaWiki-s but without writing and maintain yet another skin or branching Mediawiki and it is supported today.
But if you think hooks is what you want, I'd go with ParserBeforeTidy. The hooks list is long but divided into sections, and "Page Rendering" is section you want to check. Parser(Before/After)Tidy are called on fully generated page, so they offer the highest degree of customization (which may be undesired, though).
I'm trying to develop a invoice printing module for the application we're creating (in PHP & Javascript). The thing is... I want our clients to be able to customise their invoice output as in being able to choose where to put their logo and header, how to organize their data output, etc.
I know how I want to do it, but what I don't know is how to put it into practice, so my question is: is there any Javascript or PHP class/module providing an editable canvas/layout? (so I can allow my customers to custom design their documents or reports).
Something being able to handle <div></div> blocks in a graphical way, similar to what tag editors do, returning a serialized array or something like that... well, anything would actually do, as long as I'm able to integrate it in our codebase, but that's the question...
I couldn't find anything like what you are looking for but it shouldn't be too hard to create one.
I wouldn't go for a canvas based solution but rather on an absolutely positioned DIVs with drag and drop functionality and inline content editing.
You can easily serialize the content and position of the DIVs using Ajax.
The tutorial here is not what you are lookign for but it's the first step in the way: http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/
update
Obviously this: http://jqueryui.com/demos/draggable/ is also an important reference
I have a client who wants me to do CSS coding only, but doesn't want to give me the php files.
Right now, I just have access to the live website (with no CSS).
It is entirely made with tables and I want to use divs instead
I'm not sure if it is possible to do the coding
I thought about copying and pasting the generated HTML code from each page
Will this cause possible problems with the end result?
Yes, this will cause huge problems: you'll do an awesome job, client will have trouble integrating it with their site, client will abandon your awesome work.
IMO, you should let the client know that you'll do the best you can with what they have given you, but you would be able to save them a lot of work and do a better job if you could have access to the source code.
If you know that you can't make the client happy with what they have given you, though, it would be doing everyone a disservice for you to try.
If you absolutely can't convince them to give you access to the source, then this client sounds stupid:
He has a layout which is table based.
He wants you to magically make it look better with CSS, without having access to the source.
"#Phoenix I don't see any classes or IDs." - there are no classes or ids to hook into.
You might be able to do it if you used some CSS3 selectors to, for example, select the 3rd td inside a td inside the 2nd table to apply styles to ;)
But, that won't help if you have to support older browsers, which makes this impossible at the moment without doing something differently.
I don't have full knowledge of your situation, but here's what I would probably do (if I couldn't convince them to give me access to the source):
Open the live site.
Copy the HTML source code.
Paste it into a new local file.
Add this into the <head> section: <base href="http://the-clients-site.com/" />.
This will let all the assets on the page load from the client's actual site.
Now, you have something to work with.
You have to keep track of ALL changes you make to the file.
The first change should be adding your own blank style tag.
Then, you can add id and class to whichever elements you feel need it.
You should try to avoid moving around elements, unless it's absolutely required. Those changes are a whole lot harder to explain to someone. I know from experience.
You should be able to style the page properly now.
Then, you deliver the completed page, and the documented list of changes you had to make to the HTML (add id, here add class there).
The client should then be able to integrate the changes into his site.
Well, at a bare minimum they'll need to modify ther PHP to reference your CSS. More importantly, you need to be able to hook your CS up to elements - Do tables/rows/etc. have Ids or classes attached?
If they are clever and have some good separation between code and presentation (using a templating engine or similar) then you can probably just edit the template / css.
If they won't let you edit the PHP and you come up with a new awesome layout, they will have a nightmare job trying to integrate it and probably won't bother.
I don't see the problem. You can style tables just as easily as divs. You don't have to know how the wall is built to know how to paint it, which is pretty much all you've been hired to do. Only problem I could see would be if they haven't added any classes or ids to the elements yet. After all, what the browser/client sees is the only thing that needs styling, and since you can see everything that the browser sees, you can see everything that needs styling.
If they have added classes/ids, then just take a copy of a page and style it in a testing area, and then once it looks nice, you take a copy of another page and make sure it looks nice with it too, add to the CSS if there are any new unstyled elements that didn't exist on the first page, once it looks nice, then move on to another page, and another repeating the process until you are satisfied that it appears that every page within reason would look nice with it.
If they haven't added classes/ids, tell them they need to in some capacity before you can work on it, perhaps provide some guidance on the issue.
I'm actually doing this right now for SO.
I'm working on a userscript that provides an alternate "clean" stylesheet for the StackExchange network. I have no access to the SO engine. I am using the Chrome Inspector to look at how the elements are set up. I recommend the same. (Although it is a little different, since I'm modifying the original CSS file.)
You can easily identify what you want to style with the Inspector and then work from there. I would suggest that you ask your client for a list of classes and IDs though. (I got that in the form of an existing stylesheet, you can go about it in a different way, if that suits you and your client.)
I have a web application developed using PHP. I want my users to select themes for their pages throughout the application.
Where should I start before using PHP themes?
What should I know about Themes in a PHP application?
Edit:
My question about themes is only about changing the color of the layout, not the images.
Suppose My ADMIN user will have white and Orange, but my staff user will have white and green...
How it can be done in PHP with CodeIgniter?
There are lots of directions you can go with this.
1) "CSS ZEN"
This is where the markup remains unchanged, but you totally change the design just by using CSS and images. Demonstrated very well on http://www.csszengarden.com/
2) MVC Stylee
This is where you create a model that represents the page data and then pass it to a view, which contains some inline echo statements. The idea is that you could send the same model to a totally different view so it could look entirely different, HTML and all. Cake PHP is a good start for this: http://cakephp.org/
Example:
<div class="content">
<? echo $Page->Content ?>
</div>
3) Micro-Markup
With this method, you add your own "special tags" to an HTML page. You then read in your plain HTML page and replace the special tags with the information you want to display. This is good if you want your templates to be recognisable to HTML guys that don't know PHP and might break the PHP code in the MVC app.
Example:
<div class="content">
<#Content#>
</div>
Out of all of these, MVC is a very structured way of achieving what you want - however, I listed the other options as they cater for specific scenarios that might be relevant to you.
I have implemented the concept in all three of these, in situations that were appropriate for each.
Regarding The Edit In The Question
I imagine you'll have "something" that represents your user - so it is as easy as:
(In the event of just wanting to override a few settings...)
<link href="style.css" type="text/css" rel="stylesheet">
<?php if ($User->Type === USER_ADMIN) { ?>
<link href="admin.css" type="text/css" rel="stylesheet">
<?php } ?>
You can adjust this example in the following ways:
Use a switch statement if there will be many user types
If the replacement is total, rather than just a few overrides, you may want to completely swap the stylesheet.
You would usually set up template files that contain the HTML and CSS, and build in the PHP generated values at runtime.
The best approach to this is to have the theme reside in a separate directory, containing no code, just template variables like {mainmenu}, {backbutton}, {content} ... you get my drift. Those are then filled by your PHP script, possibly with the help of a template engine like Smarty (No need to re-invent the wheel here).
There is also the approach of having PHP markup directly in the template file(s) like echo $xyz; while this is a perfectly valid practice I use myself often, I recommend using a template engine over using PHP markup in the code if you want a solid, future-proof templating system because:
First, there is less that a designer can break when working on the HTML.
Second, having PHP markup in the code is a temptation to program PHP logic inside the template (loops, conditions) instead of properly preparing them in the PHP code at the point where the template variables are created. That is terrible for maintenance and the further use of your templates, because you have to replicate that PHP soup into every new template again. After all, you want to have a template engine so others can create new looks for your product, without having to know how to program it.
Third, with the templating engine based approach you have the possibility to add caching where necessary without any additional work. Not possible with the scripting approach. Yes, in a web application you won't be able to cache that much, but with a lot of data, there will be instances where it will help the user experience.
Fourth and least important, it makes your template less easy to export to other applications, and import templates from other applications.
The CSS Zen approach mentioned by Sohnee is great for websites, but is going to be too limited for a web application that uses complex input elements, JS based menus, and the like. It is too often that those elements need to be changed and customized in the markup.
If you have a look at my CodeIgniter Template library it briefly explains how you can set up themes and layouts (the equivalent of header & footer).
If you set up global code such as a Hook or a MY_Controller then you can dynamically set your theme based on the logged in user, the user type, etc.
Eg:
if($user->role == 'admin')
{
$this->template->set_theme('admin_skin');
}
else
{
$this->template->set_theme($user->theme);
}
That is just a VERY basic example of the sort of thing you could use this Template library for.
CMS Solutions
Magento and Wordpress package all theme related files into their own seperate directories. These contain the serverside code, stylesheets, images and javaScript for the theme. The user in effect chooses a directory to use which affects how the page is layed out and styled.
An easier approach
A much easier way to get started would be to accept that the actual content, e.g. HTML of a page would stay the same, but let the user choose from various CSS style sheets.
When choosing a style sheet the system could use JavaScript to load it in dynamically so that the user can preview the look they are choosing.
If you have really good semantic HTML it will be enough to change the CSS files. Unless the design changes are really heavy. Then it would make sense to provide PHP templates that are build with some sort of modules: variables which contain certain HTML structure like navigation or sidebar, etc.
For themes you do not need PHP. Just define your themes in CSS (the best way is one file for each theme) and use a simple JavaScript chooser like at this site: http://www.fotokluburan.cz/switchcss.js.