How to custom user profile ionic 7

Create a new app ionic

1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .

2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:

npm install -g @ionic/cli

This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:

ionic start myApp

To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:

ionic start myApp --type=blank

1. Run the app: Once you have created your app, you can run it in the browser by running the following command:

cd myApp
ionic serve

This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.

To custom scss

1. Identify the target element: Inspect the user profile component in your browser's developer tools to identify the HTML element or class that represents the user profile. This will help you select the appropriate CSS selector to apply styles.

2. Apply the custom styles: Once you have defined your custom styles, you need to apply them to the user profile component. This can be done by adding the appropriate CSS classes or IDs to the corresponding HTML elements in your user profile template.

For example, if your user profile component has a container element with the class user-profile, you can apply the styles like this:

profile.page.html

<ion-content>
  <div lass="header">
    <h2>Issam Drmas</h2>
    <div class="space-between">
      <div class="followings">
        <ion-badge color="danger" mode="ios">42</ion-badge>
        <p>Abonnés</p>
      </div>
      <div class="followings">
        <ion-badge color="danger" mode="ios">142</ion-badge>
        <p>Abonnements</p>
      </div>
    </div>
  </div>

  <div class="flex">
    <div class="border-blue">
      <div class="border-white">
        <div class="img-box">
          <img
            src="https://img.over-blog-kiwi.com/0/87/20/59/20190804/ob_f940bb_8bf3477e-e55c-4f56-ab33-59d3380f899e.jpeg"
            alt="">
        </div>
      </div>
    </div>
  </div>

  <ion-card>
    <ion-item lines="none">
      <ion-avatar slot="start">
        <img
          src="https://img.over-blog-kiwi.com/0/87/20/59/20190804/ob_f940bb_8bf3477e-e55c-4f56-ab33-59d3380f899e.jpeg"/>
      </ion-avatar>
      <ion-label> <b><h2>Issam drmas</h2> </b>
        <p>Il y a 23 min</p>
      </ion-label>
    </ion-item>
    <ion-item lines="none" class="tweet">
      <ion-label class="ion-text-wrap">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore officiis
        voluptates eos sit eveniet commodi laborum accusamus porro, beatae non
        adipisci. Enim explicabo facere harum labore delectus provident ad
        minus.
      </ion-label>
    </ion-item>
    <img class="tweet-img"
      src="https://cap.img.pmdstatic.net/fit/http.3A.2F.2Fprd2-bone-image.2Es3-website-eu-west-1.2Eamazonaws.2Ecom.2Fcap.2F2017.2F05.2F05.2F0077212a-9f5f-4ce5-b6b0-a3009fa174f6.2Ejpeg/750x375/background-color/ffffff/quality/70/sans-steve-jobs-apple-reste-une-star-mais-n-apaise-pas-les-doutes-1171549.jpg"/>
    <ion-button size="small" fill="clear">
      <ion-icon name="chatbox-ellipses-outline" slot="start"></ion-icon> 43
    </ion-button>

    <ion-button size="small" fill="clear">
      <ion-icon name="repeat" slot="start"></ion-icon> 435
    </ion-button>

    <ion-button size="small" fill="clear">
      <ion-icon name="heart-outline" slot="start"></ion-icon>343
    </ion-button>

  </ion-card>
</ion-content>

1. Write your custom styles: Open the profile.page.scss file and write your custom CSS rules. Here's an example of how you can style a user profile:

profile.page.scss

.header {
  background: #e74c3c;
  height: 180px;
  padding-top: 1px;
}
.header h2 {
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.header .space-between {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0 10px;
}
.header .followings {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header .followings p {
  color: #ffffff;
  margin: 8px 0 0 0;
}
.img-box {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  overflow: hidden;
}
.border-white {
  border: 4px solid #ffffff;
  border-radius: 50%;
  width: fit-content;
}
.border-blue {
  border: 7px solid #c0392b;
  border-radius: 50%;
  width: fit-content;
}
.flex {
  display: flex;
  justify-content: center;
  margin-top: -76px;
}
.tweet {
  margin-top: -10px;
}
.tweet ion-label {
  line-height: 1 !important;
  font-size: 15px;
  margin: 6px 0 !important;
  min-height: 34px;
}
.tweet-img {
  width: 95%; 
  margin-left: 2.5%; 
  border-radius: 10px;
}

Save your changes and the custom styles should be applied to the user profile component.

Remember to experiment and adjust the styles according to your specific design requirements.