We have bought an admin theme from Themeforest for our web application, which is being built using CakePHP2 framework. I know the basic way of integrating this theme into the cakephp framework, where we put the respective JS, CSS files under webroot folder and create layout to includes these files.
This method does give me desired results but I feel this is not the best way to integrate a theme in a MVC architecture. Because it does not work always for example, if i want to use just a look and feel of the downloaded theme and use Cakephp's pagination method it does not work seemlessly and i then need to keep tweaking the UI. Thus, I think there must be a best practice to integrate such themes. Can anyone suggest me if there is any better way of doing this integration?
I tried to search for such articles on the internet but did not find any suitable ones.Can you point me to one if you know or suggest any better way?
Thank you in Advance.
It sounds like you have integrated your purchased theme correctly.
Because the theme you purchased was not created as as CakePHP theme, the CSS is unlikely to match. This is what is causing your issue with some features not displaying correctly, such as CakePHP's pagination... the pagination helper ads HTML to the view in CakePHP that will more than likely not be covered by your general html theme.
For any instances you find that do not look like you expect, you will have to manually add CSS to your themes CSS file, or if your lucky just rename the CSS styles already in place.
Sorry, there is no easy way to fix this except manually integrating the missing CSS/HTML.
Good luck.
Related
What we want to do:
We have two projects:
A consumer focused frontend
A business focused dashboard
The frontend uses cool custom styling, while the dashboard is rather boring. The idea is that you can edit and create objects in the dashboard and then preview them in the styling of the frontend (imagine setting up an amazon product and then previewing it as the product page). Ideally we would also like to offer live editing, meaning you see the proper rendered product page and you can edit the information live.
Our Setup
Two separate repositories
Both use React + Tailwind
There are not many custom CSS classes as everything is styled via tailwind classes in the code
What would be the best solution?
I have a couple of solutions, that might work with more or less success (e.g. sharing components via bit.dev). Did someone built something similar or could recommend some best practices?
Depends on what is the best solution for you. What is best for you, might not be the best for me, or the other way around.
Bit is a way to share components. Components are isolated pieces of functionality (UI, Hooks, Themes, whatever) That can be used and consumed across several projects.
You could totally have a Bit workspace, where you design, create and edit your components, export them once finished, and consume them in both your repositories.
bit new react my-shared-components-workspace --default-scope LeonardCompany.LeonardRemoteScope
cd my-shared-components-workspace
bit create react shared-button
# edit your button
bit tag -m "initial tag" shared-button
bit export shared-button
In your repos:
npm install #bit/LeonardCompany.LeonardRemoteScope.shared-button
Want to update the button? Edit it again in your workspace, export, and update the projects. Ultimately, those projects could be App components too.
Let me know if it helped.
I am at the beginning of creating my own personal React Web App, and I would like to first start by creating a custom trapezoidal (Nothing too complex) shape to use all over the front page.
I researched many methods and libraries that could help (Konva, draw-shape-reactjs, etc.); however, I would like to ask for other opinions about what to use. I did see somewhere that React does not work well with HTML Canvas. So I'll avoid that, unless told otherwise.
If I should consider a simpler way to create such shapes with CSS on a React Framework, please let me know.
I'm a complete beginner in ReactJS. I'm currently designing a website using it and currently working through localhost.
My main page is on localhost:3000 and I want to navigate to localhost:3000\University(I have designed a separate file University.js for this).
On navigating to the content of this file, it overlaps with the existing content (ie that of localhost:3000). Is there any way to show the new content without overlapping as well as with separate CSS. Any help would be really appreciated.
Actually, I'm not getting what you mean by "overlapping content"! For the css part maybe you are looking for something like "local stylesheets" aka "css modules".
This answer has an example of using local stylesheet for each component. Also, there are various libraries, as mentioned in this post, which can come handy for you.
Go through this article, and pay attention at method 4 there. CSS modules is one of the best solutions in case you are experiencing CSS overlapping.
PS: react-native and react-js are two different tags!
You can understand react routing here, if you have some doubt over it. (Mentioning this because of tag!)
Is there any website that is similar to bootsnipp.com (for Bootstrap) But of course dedicated for angular-material?
You have CodePen and Their orginal site (which you may already know of).
If you search for ideas to new design possibilities I would also recommend Google MDL (Material Design Lite). They relay more on more CSS, but got almost the same rules for design.
I have MEAN.js installed, along with an Angular theme that I would like to replace the default MEAN Angular theme with, in looking at the structure of each, I'm having a hard time figuring out how to implement it, does anyone have an approach or perhaps a link to a tutorial for this.
If you're referring to the Bootstrap theme, you can place the theme files in a convenient directory and then update the config/assets/default.js file with the path to the theme files.